How can I create a doughnut chart with 2 datasets where only one of them displays images? I managed to render both datasets and add images using chartjs-plugin-labels, but it applies the images to both datasets. Is there a way to specify which dataset should have the images?
https://i.sstatic.net/9FZYN.png
var config = {
type: 'doughnut',
data: {
datasets: [
/* Outer doughnut data starts*/
{
data: [
10,
20,
30
],
backgroundColor: [
"rgb(255, 0, 0)", // red
"rgb(0, 255, 0)", // green
"rgb(0, 0, 255)", //blue
],
label: 'Doughnut 1'
},
/* Outer doughnut data ends*/
/* Inner doughnut data starts*/
{
data: [
45,
25,
11
],
backgroundColor: [
"rgb(255, 0, 0)", // red
"rgb(0, 255, 0)", // green
"rgb(0, 0, 255)", //blue
],
label: 'Doughnut 2'
}
/* Inner doughnut data ends*/
],
labels: [
"Info 1",
"Info 2",
"Info 3"
]
},
options: {
responsive: true,
legend: {
position: 'top',
},
plugins: {
labels: {
render: 'image',
images: [
null,
null,
{
src: 'https://i.sstatic.net/9EMtU.png',
width: 20,
height: 20
}
]
}
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
callbacks: {
label: function(item, data) {
console.log(data.labels, item);
return data.datasets[item.datasetIndex].label+ ": "+ data.labels[item.index]+ ": "+ data.datasets[item.datasetIndex].data[item.index];
}
}
}
}
};
window.onload = function() {
var ctx = document.getElementById("myChart")
.getContext("2d");
window.myDoughnut = new Chart(ctx, config);
};<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
</body>
</html>