Chart.js to show tooltips on pie chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Tooltip

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

Description

Chart.js to show tooltips on pie chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>chart.js 2.1</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  w w  w.  j a  v a  2s.com
      var ctx = document.getElementById("canvas").getContext("2d");
      var data = {
         labels: [
            "Red",
            "Green",
            "Yellow"
         ],
         datasets: [
            {
               data: [300, 50, 100],
               backgroundColor: [
                  "#FF6283",
                  "#36A2EB",
                  "#FFCC54"
               ],
               hoverBackgroundColor: [
                  "#FF6283",
                  "#36A2EB",
                  "#FFCC54"
               ]
            }]
      };
      Chart.pluginService.register({
         beforeRender: function (chart) {
            if (chart.config.options.showAllTooltips) {
               chart.pluginTooltips = [];
               chart.config.data.datasets.forEach(function (dataset, i) {
                  chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                     chart.pluginTooltips.push(new Chart.Tooltip({
                        _chart: chart.chart,
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart.options,
                        _active: [sector]
                     }, chart));
                  });
               });
               // turn off normal tooltips
               chart.options.tooltips.enabled = false;
            }
         },
         afterDraw: function (chart, easing) {
            if (chart.config.options.showAllTooltips) {
               if (!chart.allTooltipsOnce) {
                  if (easing !== 1)
                     return;
                  chart.allTooltipsOnce = true;
               }
               chart.options.tooltips.enabled = true;
               Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                  tooltip.initialize();
                  tooltip.update();
                  tooltip.pivot();
                  tooltip.transition(easing).draw();
               });
               chart.options.tooltips.enabled = false;
            }
         }
      })
      var myPieChart = new Chart(ctx, {
         type: 'pie',
         data: data,
         options: {
            showAllTooltips: true
         }
      });
    }

      </script> 
   </head> 
   <body> 
      <canvas id="canvas"></canvas>  
   </body>
</html>

Related Tutorials