I have created this simple graph with Chart JS:
<canvas id="myChart" width="200" height="200"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Banana", "Apple", "Orange"],
datasets: [{
data: [12, 15, 9],
backgroundColor: [
'rgba(223, 105, 105, 0.6)',
'rgba(48, 104, 193, 0.6)',
'rgba(94, 234, 197, 0.6)'
],
borderColor: [
'rgba(223, 105, 105, 0.6)',
'rgba(48, 104, 193, 0.6)',
'rgba(94, 234, 197, 0.6)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
mode: 'label',
maintainAspectRatio: true,
animateRotate : true,
title: {
display: false,
text: 'My Chart'
},
legend: {
display: false
},
onClick: function() {
alert("hallo");
}
}
});
</script>
As you can see I have an "onCLick" event, but I don't want it because it applies to a click on the whole graph. What I'm looking for is a way to apply the "events" "onclick" for each of the different data I have on the chart. I have read the Chart.js documentation and found that the "events" function expects an Array[String], but due to my lack of experience, I haven't succeeded to use a different action for each of the data on the chart.
Any suggestion would be helpful!