0
174
ViewsChart js - render images on only one dataset
I need a doughnut chart with 2 datasets and in 1 of them I need to render images. I was able to render the 2 datasets and render images using chartjs-plugin-labels but this will add images to both datasets. Is there a way to tell chart js which dataset need the images?
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.stack.imgur.com/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>
·
Juan Pablo Isaza
1 answers
Answer question0
Based on documentation, you can use:
labels: {
render: function (args) {
// { label: 'Label', value: 123, percentage: 50, index: 0, dataset: {...} }
// index - datasetIndex
if (args.index == 1) {
return { src: 'url', width: 25, height: 25 };
}
return undefined;
},
},
·
Juan Pablo Isaza
Report
Answer question