lpcarignan
Posts: 36
Joined: Mon Mar 22, 2021 3:17 pm

Animation to bring focus on specific points

Hi,

I'm looking for a way to bring the user's attention on some specific points on a scatterplot chart.

When the user clicks on a button on the UI, (ex: 'Show old data'), the chart should highlight these points in a visual manner.

My first idea was to simply change their colors. But as my app permits color coding the data, these points can be missed if there's a lot of different colours on the chart.

My second idea was just to make the marker bigger. But it didn't look great and the bigger markers were over stepping on other dots.

My third idea was to animate the points I want to highlight. But I looked around the forums and didn't find any questions relevant to this. I looked in the API reference and there doesn't seem to be a built-in functionnality to flash points in a chart. With 10+ years of development, if Highcharts doesn't support this, there must be a good reason.

So I wanted to ask this forum if there are any recommandation/guidelines Highcharts recommend when animating specific points to the attention of the user?
If not, what has been your prefered way to highlight points? Do you have a demo to give an idea of how it worked in your project?

Louis-Philippe
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Animation to bring focus on specific points

Hello,

You can use the Higcharts methods to dynamically display the tooltip for a point and add a hover state.

Demo: https://jsfiddle.net/BlackLabel/r18yd5uL/
API: https://api.highcharts.com/class-refere ... ip#refresh
https://api.highcharts.com/class-refere ... t#setState

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”