neha.s.mahajan
Posts: 6
Joined: Thu Apr 29, 2021 11:10 pm

Synchronized Tooltip across multiple charts and multiple series.

Hi Highcharts Team,

I wanted to achieve synchronized tooltip across multiple charts and multiple series.
I was able to achieve it in this jsfiddle: https://jsfiddle.net/nehamahajan/h30ruj8a/20/ where datapoints across multiple charts/series is reported at the exact same time.

But when i have series with datapoints reported few minutes apart the synchronization does't work as expected in this jsfiddle
https://jsfiddle.net/nehamahajan/e5w7uqva/72/

If we hover over series 3 (green line) in chart 1 the time the datapoint is reported is at 1642122083091 but the tooltip also shows points from other series reported at different time. Even the datapoints markers are highlighted but the series itself are dimmed.

Similarly the case with chart 2. In chart 2 series 3 has datapoint at time 1642122083091 but the tooltip also shows points from other series reported at different time.

What I want to achieve:
I want to show datapoints that are reported exactly at the same time across multiple charts and series and not nearby points.
Can you please help.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Synchronized Tooltip across multiple charts and multiple series.

Hi neha.s.mahajan,

Thanks for contacting us with your question.

In this case for a synchronized chart exact times ale required in all series. As you can see in the code, pointer.normalize method is used to calculate pointer position based on mousemove event, and then that computed value is used in searchPoint to find the closest point for each series. When all points have exact values, then they are selected correctly, if not the other point that is closest to the pointer is selected, and that is your case. Unfortunately, you can't really do anything about that.

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

Return to “Highcharts Usage”