[Chartjs]-ChartJS: Get individual values minus another value in the custom legend

1👍

just need to reference the second dataset and subtract the city values…

here, you’re building the first legend…

for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
    if (chart.data.datasets[0].labels[i]) {
        text.push('<span class="font-weight-bold">' + chart.data.datasets[0].labels[i] + ': ' + chart.data.datasets[0].data[i] +'</span>');
    }
    text.push('</li>');
}

to build the second, use the same code, but reference the second dataset and subtract the city value…

for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
    text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
    if (chart.data.datasets[0].labels[i]) {
        text.push('<span class="font-weight-bold">Rest of ' + chart.data.datasets[0].labels[i] + ': ' +
            (chart.data.datasets[1].data[0] - chart.data.datasets[0].data[i]) + // <-- second dataset = datasets[1] and india 2018 = data[0]
        '</span>');
    }
    text.push('</li>');
}

see following working snippet…

var data = [{
            labels: ["Mumbai", "Chennai", "Hyderabad", "Bangalore"],
            data: [30, 32, 38, 50],
            backgroundColor: [
                "#4b77a9",
                "#5f255f",
                "#d21243",
                "#B27200"
            ],
            borderColor: "#fff"
        }, {
            labels: ["India 2018", "India 2017"],
            data: [450, 400],
            backgroundColor: [
                "#92d400",
                "#95a455"
            ],
            borderColor: "#fff"
        }];

    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 i = 0; i < chart.data.datasets[0].data.length; i++) {
        text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
        if (chart.data.datasets[0].labels[i]) {
        	text.push('<span class="font-weight-bold">' + chart.data.datasets[0].labels[i] + ': ' + chart.data.datasets[0].data[i] +'</span>');
        }
        text.push('</li>');
    }
    for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
        text.push('<li class="list-inline-item"><i class="fas fa-circle pr-1" style="color:' + chart.data.datasets[0].backgroundColor[i] + '"></i>');
        if (chart.data.datasets[0].labels[i]) {
        	text.push('<span class="font-weight-bold">Rest of ' + chart.data.datasets[0].labels[i] + ': ' +
        		(chart.data.datasets[1].data[0] - chart.data.datasets[0].data[i]) + // <-- second dataset = datasets[1] and india 2018 = data[0]
        	'</span>');
        }
        text.push('</li>');
    }
    text.push('</ul>');
    return text.join('');
},
        legend: {
            display: false
        },
        plugins: {
            datalabels: {
                color: '#ffffff'
            }
        },
        tooltips: {
            callbacks: {
                label: function (item, data) {
                    var label = data.datasets[item.datasetIndex].labels[item.index];
                    var value = data.datasets[item.datasetIndex].data[item.index];
                    var allData = data.datasets[item.datasetIndex].data;
                    var tooltipData = allData[item.index];
                    return label + ': ' + tooltipData;
                }
            },
            titleFontSize: 14,
            bodyFontSize: 12
        }
    };

    var ctx = document.getElementById("my-chart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: data
        },
        options: options
    });
    $('#legend').html(myChart.generateLegend());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="my-chart"></canvas>
<div id="legend"></div>

Leave a comment