CODEWITHSUNDEEP
chart.jsreact-chartjs-2
Adrian Wasilewski
Adrian Wasilewski

Reputation: 11

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.

Upvotes: 0

Views: 650

Answers (1)

Adrian Wasilewski
Adrian Wasilewski

Reputation: 11

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.

Upvotes: 1

Related Questions