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: {
      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());