Synchronized Charts in JavaScript Chart control
18 Nov 20181 minute to read
Synchronized charts allow multiple chart instances to share common interactions so that actions performed on one chart are reflected across the others. This approach is useful for comparing related datasets and analyzing trends consistently across multiple visualizations.
Tooltip synchronization
The tooltip can be synchronized across multiple charts by using the showTooltip and hideTooltip methods. When the user hovers over a data point in one chart, the showTooltip method can be invoked for the other charts to display the corresponding tooltip information simultaneously.
In the showTooltip method, specify the following parameters programmatically to enable the tooltip for a specific chart:
-
x– The x-value of the data point or the x-coordinate. -
y– The y-value of the data point or the y-coordinate.
Crosshair synchronization
The crosshair can be synchronized across multiple charts by using the showCrosshair and hideCrosshair methods. When the user moves the pointer over one chart, calling the showCrosshair method on the other charts aligns the crosshair position across all synchronized charts, making data comparison easier.
In the showCrosshair method, specify the following parameters to render the crosshair for a particular chart:
-
x– Specifies the x-value of the data point or the x-coordinate. -
y– Specifies the y-value of the data point or the y-coordinate.
Zooming synchronization
Zoom levels can be synchronized across multiple charts by using the zoomComplete event. In the zoomComplete event, retrieve the zoomFactor and zoomPosition values from the zoomed chart.
Selection synchronization
Selection can be synchronized across multiple charts by using the selectionComplete event. In the selectionComplete event, retrieve the selected data values or region from the active chart and apply the same selection state to the other charts.