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 config = [{
			data:{
            datasets: [{data:[10798225,41089,237167],
            backgroundColor: [
                "#4b77a9",
                "#5f255f",
                "#d21243",
                "#B27200"
            ],
            borderColor: "#fff",
            label:"poop",
            labels: ["Mumbai", "Chennai", "Hyderabad", "Bangalore"],
        }, {
            datasets: [{data:[80, 70],
            backgroundColor: [
                "#92d400",
                "#bbb"
            ],
            borderColor: "#fff",
            label:"poopier",
            labels: ["sdfsdf", "fffffewf"]
        }]
       }
      ]
     }
    }
   ]
    

    var options = {
        cutoutPercentage: 35,
        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.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 =...