JSFiddle - React, Tailwind, and code Playground
by rough cheap
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
JavaScript
var ctx = document.getElementById("myChart");
var data = {
// labels: ["a","b","c","d","e","f"],
datasets: [{
data: [10, 20, 20, 30],
label: 'Data 1',
labels: ["a", "b", "c", "d"],
backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56']
},
{
data: [30, 50],
label: 'Data 2',
labels: ["e", "f"],
backgroundColor: ['#ffffbb', '#0000aa']
}
],
};
var options = {
tooltips: {
callbacks: {
label: function(item, data) {
console.log(item)
var label = data.datasets[item.datasetIndex].labels[item.index];
var value = data.datasets[item.datasetIndex].data[item.index];
return label + ': ' + value;
}
}
}
};
var pieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: options
})