Home › forums › Using CanvasJS › Syncing crosshairs on multiple charts
Curious if there is a way to sync crosshairs or tooltips across multiple charts?
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.
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.
You can achieve your requirement by setting bubbles to false during the simulation of mouseevent. Please take a look at this JSFiddle.
You must be logged in to reply to this topic.