JSFiddle - React, Tailwind, and code Playground

by Gary Davies

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="pieChart"></canvas>
<div id="legend"></div>

JavaScript

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,
  tooltips: {
    callbacks: {
  //    labelColor: function(tooltipItem, chart) {
  //    	var colour = data.datasets[tooltipItem.datasetIndex].backgroundColor
  //      return {
  //        borderColor: 'rgb(255, 0, 0)',
  //        backgroundColor: colour[tooltipItem.index]
   //     }
   //   },

      label: function (tooltipItem, data) { 
        var labels = data.datasets[tooltipItem.datasetIndex].labels;
        var values = data.datasets[tooltipItem.datasetIndex].data;
        var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        var colour = data.datasets[tooltipItem.datasetIndex].backgroundColor
        var total = 0;
        for (var i in values) {
          total += values[i];
        }

        var totally = total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        var label = [];
        for (var j in labels) {
          var percentage = Math.round((values[j] / total) * 100);
 					label.push(colour[j])
          label.push (labels[j] + " : " + values[j].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + ' (' + percentage + '%)');
        }       
        label.push("Total : " + totally)
        return label;
      }
    }
  }
};

var ctx = document.getElementById("pieChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: options
});