Syncing crosshairs on multiple charts

[chartguy]

Curious if there is a way to sync crosshairs or tooltips across multiple charts?

Thanks!

[Vishwas R]

@chartguy,

You can sync crosshair & toolTips across charts by getting the pixel co-ordinates from the first chart & then triggering an event in second chart and so on. You can use convertValueToPixel() and convertPixelToValue() methods to get the pixel co-ordinates & corresponding values. Here is a jsfiddle for the same. Please note that there may be a slight variation in x-value as pixel co-ordinates are used.

—
Vishwas R
Team CanvasJS

[Anthony]

The jsfiddle only works if you hover on the first chart. Hovering over the second chart doesn’t cause the first chart to show the crosshair.

If you have both charts configured to cause the other to show the crosshair then you get a stack overflow since a mouse event triggers a mouse event on the other canvas, which relays it back. This happens in a loop until your browser crashes. Need a better solution.

[Vishwas R]

@accadmjlab-org,

You can achieve your requirement by setting bubbles to false during the simulation of mouse event. Please take a look at this JSFiddle.

—
Vishwas R
Team CanvasJS

[Vishwas R]

[UPDATE]

@xavcactus,

We have just released v3.0 Beta-1 with this feature. Please refer to the release blog for more information. Do download the latest version from download page & let us know your feedback.

—
Vishwas R
Team CanvasJS