Search code examples
chart.jsreact-chartjs-2

ChartJS remove hover halo / shadow in doughnut chart

I have a customized doughnut chart done in ChartJS and the default hover behaviour is to change color of the hovered arc and show gray halo behind it.

I would like to remove the halo effect, but still be able to change color onHover.

Can someone direct me to the attribute responsible for the halo?

I was able to change hoverBackgroundColor to the one I want, but I cannot find the option responsible for the shadow.

I tried with custom plugin, but still do not know what value should be changed to get rid of the halo.

I also tried with events: {hover: null}, but this disabled changing the color as well.

Solution

  • I found out that the halo effect is made through changing borderColor on hover.

    Setting the value of hoverBorderColor to the value same as canvas background solved my issue.