Show tooltips on Chart.js with hover - Javascript Chart.js

Javascript examples for Chart.js:Chart Tooltip

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

Description

Show tooltips on Chart.js with hover

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://rawgit.com/nnnick/Chart.js/f3eb6f4a433b4f34a582842dcf7b42f710861a7d/Chart.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   w w  w.  jav  a 2  s  .c om*/
    var config = {
        type: 'pie',
        options: {
            events: false,
            animation: {
                duration: 0
            },
            onAnimationComplete: function () {
                var self = this;
                var elementsArray = [];
                Chart.helpers.each(self.data.datasets, function (dataset, datasetIndex) {
                    Chart.helpers.each(dataset.metaData, function (element, index) {
                        var tooltip = new Chart.Tooltip({
                            _chart: self.chart,
                            _data: self.data,
                            _options: self.options,
                            _active: [element]
                        }, self);
                        tooltip.update();
                        tooltip.transition(Chart.helpers.easingEffects.linear).draw();
                    }, self);
                }, self);
            }
        },
            data: {
                datasets: [{
                    data: [
                        2,
                        4,
                        7,
                        1,
                        6,
                    ],
                    backgroundColor: [
                        "#F7464A",
                        "#46BFBD",
                        "#FDB45C",
                        "#949FB1",
                        "#4D5360",
                    ],
                }],
                labels: [
                    "Red",
                    "Green",
                    "Yellow",
                    "Grey",
                    "Dark Grey"
                ]
            },
        };
        var ctx = document.getElementById("chart").getContext("2d");
        var piechart = new Chart(ctx, config);
    }

      </script> 
   </head> 
   <body> 
      <canvas id="chart" height="450" width="650"></canvas>  
   </body>
</html>

Related Tutorials