JSFiddle - React, Tailwind, and code Playground

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: {
  	custom: function(tooltip) {
    tooltip.displayColors = false;
    },
    callbacks: {
      label: function (tooltipItem, data, tooltip) { 
        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 (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
});
//$('#legend').html(myChart.generateLegend());