ChartJS to Show all tooltips with Total for Multi Pie chart - Javascript Chart.js

Javascript examples for Chart.js:Chart Tooltip

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

Description

ChartJS to Show all tooltips with Total for Multi Pie chart

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://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*  ww w  .  j  a v  a  2 s .  co m*/
var data = {
  datasets: [
    {
      data: [30, 32, 38, 50],
      labels: ["Mumbai", "Chennai", "Hyderabad", "Bangalore"],
      backgroundColor: [
        "#4b77a9",
        "#5f255f",
        "#d21243",
        "#B27200"
      ],
      borderColor: "#fff"
    }, {
      data: [80, 70],
      labels: ["Arrivals", "Departure"],
      backgroundColor: [
        "#92d400",
        "#bbb"
      ],
      borderColor: "#fff"
    }
  ]
};
var options = {
  cutoutPercentage: 15,
  legendCallback: function (chart) {
    var text = [];
    text.push('<ul class="list-inline my-0 text-center ' + chart.id + '-legend text-secondary">');
    for(var j = 0; j < chart.data.datasets.length; j++){
      for (var i = 0; i < chart.data.datasets[j].data.length; i++) {
        text.push('<li class="list-inline-item"><small><i class="fas fa-circle pr-1" style="color:' +
                  chart.data.datasets[j].backgroundColor[i] + '"></i>');
        if (chart.data.datasets[j].labels[i]) {
          text.push('<span class="font-weight-bold">' + chart.data.datasets[j].labels[i] + '</span>');
        }
        text.push('</small></li>');
      }
    }
    text.push('</ul>');
    return text.join('');
  },
  legend: {
    display: false
  },
  plugins: {
    datalabels: {
      color: '#ffffff'
    }
  },
  tooltips: {
    callbacks: {
      label: function (tooltipItem, data) {
        var label = data.datasets[tooltipItem.datasetIndex].labels[tooltipItem.index];
        var values = data.datasets[tooltipItem.datasetIndex].data;
        var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        var total = 0;
        for (var i in values) {
          total += values[i];
        }
        var percentage = Math.round((value / total) * 100);
        var totally = total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        if (tooltipItem.datasetIndex < data.datasets.length - 1) {
          return label + " : " + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' (' + percentage + '%)';
        } else {
          return [label + " : " + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' (' + percentage + '%)', "Total : " + totally];
        }
      }
            }
        }
    };
    var ctx = document.getElementById("pieChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: data,
        options: options
    });
    $('#legend').html(myChart.generateLegend());
    }

      </script> 
   </head> 
   <body> 
      <canvas id="pieChart"></canvas> 
      <div id="legend"></div>  
   </body>
</html>

Related Tutorials