codenamezero
Posts: 22
Joined: Thu Dec 19, 2019 7:23 pm

How could I make columnrange's bar thicker on hover?

I have this sample https://jsfiddle.net/totszwai/4g7uxdfL/

I tried to make the column like, scale(2) + translateY, or something on hover, but I'm having a hard time to scale it up and shifting it back to the correct position... Is there an easier solution to make the bar "pop" on hover? I must've been doing it the wrong way... but I tried to use out of the box API from Highcharts such as markers, states etc and couldn't archive the results I wanted.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How could I make columnrange's bar thicker on hover?

Hi codenamezero,

Thanks for contacting us with your question.

The easiest way to achieve something like, would be to use hover state. You can set point's borderWidth and borderColor for hover state, which would imitate scale behaviour. You could also try to use mouseOver and mouseOut events.
Demo:https://jsfiddle.net/BlackLabel/cvsb0jk6/
API reference: https://api.highcharts.com/highcharts/s ... .mouseOver,
https://api.highcharts.com/highcharts/s ... s.mouseOut,
https://api.highcharts.com/class-refere ... ement#attr

Let me know if you have any further questions!
Regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Usage”