I need to add a glow effect on hover to the doughnut chart I created. An example of the same can be found here - https://nagix.github.io/chartjs-plugin-style/samples/doughnut.html
The above link plugin works only with chart.js V2, but not with chart.js v3.
Does anyone know how can I achieve this?
I have created a doughnut chart using the following code snippet:
const myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
{
label: 'My First Dataset',
data: chartData,
borderWidth: 0,
backgroundColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
},
],
},
options: {
hoverBorderWidth: 2.84,
spacing: 20,
hoverBorderColor: [
'#2BB3FF',
'#59DDAA',
'#FDC23C',
'#FF622D',
'#AB6CFE',
'#C4C7CF',
'#F67CF2',
],
elements: {
arc: {
angle: 360,
borderWidth: 18,
},
},
layout: {
padding: {
left: 15,
right: 15,
top: 10,
bottom: 15,
},
},
responsive: true,
cutout: '90%',
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
},
},
},
});