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,
  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 + " : " +...