Chart.js : Multiple colors for tooltipFontColor - Javascript Chart.js

Javascript examples for Chart.js:Chart Color

  1. HOME
  2. Javascript
  3. Chart.js
  4. Chart Color

Description

Chart.js : Multiple colors for tooltipFontColor

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
      <script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//from w  w w .  j  av a 2 s .c  o  m
    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, -81, 56, -55, 40]
            }
        ]
    }
    var ctx = document.getElementById("canvas").getContext("2d");
    new Chart(ctx).Line(data, {
        // take over the tooltip binding
        tooltipEvents: [],
        onAnimationComplete: function () {
            // copy of chart.js binding except that ...
            Chart.helpers.bindEvents(this, ["mousemove", "touchstart", "touchmove"], function (evt) {
                var activePoints = (evt.type !== 'mouseout') ? this.getPointsAtEvent(evt) : [];
                this.eachPoints(function (point) {
                    point.restore(['fillColor', 'strokeColor']);
                });
                Chart.helpers.each(activePoints, function (activePoint) {
                    activePoint.fillColor = activePoint.highlightFill;
                    activePoint.strokeColor = activePoint.highlightStroke;
                });
                // ... we set the font color before the tooltip is shown
                if (activePoints.length !== 0) {
                    if (activePoints[0].value >= 0)
                        this.options.tooltipFontColor = "#FFF";
                    else
                        this.options.tooltipFontColor = "#F00";
                }
                this.showTooltip(activePoints);
            });
        }
    });
    });

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" height="515" width="1140"></canvas>  
   </body>
</html>

Related Tutorials