0👍
✅
See this answer from Aniko Litvanyi on the same type of labeling issue. Chart JS has options for a tooltip callback function to read two sets of labels. I have included this incorporated in your chart below.
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
label: "Current Score",
data: [650, 850],
backgroundColor: [
'rgba(20, 127, 171, 1)',
'rgba(255, 255, 255, 0.7)'
],
labels: [
'Label 1',
'Label 2'
]
},
{
label: "Score Range",
data: [300, 600, 650, 700, 750, 800],
backgroundColor: [
'rgba(188, 32, 38, 1)',
'rgba(235, 71, 35, 1)',
'rgba(246, 142, 31, 1)',
'rgba(254, 204, 9, 1)',
'rgba(125, 187, 66, 1)',
'rgba(15, 146, 70, 1)'
],
labels: [
'Very Bad',
'Poor',
'Fair',
'Good',
'Very Good',
'Excellent'
]
}
]
},
options: {
legend: {
display: false
},
rotation: 1 * Math.PI,
circumference: 1 * Math.PI,
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
Source:stackexchange.com