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>
Source:stackexchange.com