Click listener calls chart onClick function
https://github.com/chartjs/chartjs-plugin-datalabels/issues/219
by Florent27000
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js"></script>
<div style="margin: auto; max-width: 512px">
<canvas id="steps"></canvas>
</div>
JavaScript
Chart.register(ChartDataLabels);
const chart = new Chart('steps', {
type: 'doughnut',
data: {
labels: ["a", "b"],
datasets: [{
data: [16, 32],
}],
},
options: {
animation: false,
onClick: (event) => {
console.log(event)
},
plugins: {
legend: false,
tooltip: false,
datalabels: {
borderColor: "blue",
borderRadius: 32,
borderWidth: 1,
color: "blue",
padding: 16,
font: {
size: 14,
weight: 700
},
listeners: {
click: () => {
console.log('label clicked!')
}
}
}
}
}
});