Synchronize multiple charts to align data insights and interactive elements, offering a unified analysis experience.
Synchronization Copy Link
Enable chart synchronization by configuring the sync option on at least two charts. By default this will synchronize the axis domain, zoom, and user node interactions along the x axis.
sync: {
enabled: true,
},
In the above example:
- Both charts have the same axes domain range for the x axis.
- Any changes to the horizontal zoom level or position made in any chart or the Navigator, are reflected in both charts.
- Hovering a node in one chart, will highlight and show crosshairs and tooltips for the corresponding node in the other chart.
All synchronized axes must have the same values for their min, max, nice and reverse properties.
Axes Domain Copy Link
Synchronize the axis domain of multiple charts, to ensure they all show the same domain range.
sync: {
axes: 'y', // Options are `x`, `y`, `xy`
nodeInteraction: false
},
In the above example:
- Only the
yaxes have been synchronized. The values on eachxaxis are different. - Changing the automatic
yaxis domain range by clicking the legend items in one chart, will change theyaxis domain range in the other. - The
nodeInteractionsynchronization is disabled, andzoomis not enabled on either chart.
Node Interaction Copy Link
A hovered node in one chart will highlight and show tooltips and crosshairs (if enabled) for the corresponding node in other synchronised charts.
The nodes are matched on identical values along the axis specified in sync.axes. This can be x or y, if xy is specified values are matched on the x axis only.
For multi-series charts, series with matching _key configurations will be matched together.
In the above example:
- Node interactions are synchronized by matching X-axis values and Y-axis series keys.
- Hovering on a node in one chart will highlight the corresponding node in the other chart.
This synchronisation is enabled by default. To disable, set nodeInteraction to false.
sync: {
nodeInteraction: false,
},
Synchronization of node interaction for single-series charts requires that only a single matching node is shown in each chart, with unique values along the synchronised axis. For multi-series charts, each series can only contain one node per X-axis value, and the series to be matched must have identical keys for the Y-axis values.
Zoom Copy Link
Maintains shared zoom level and position on the synchronized axes across charts. This is applied to the axes specified in the sync.axes option.
- The zoom is shared based on the axis values, and is independent of the actual container or chart size.
- It is possible to disable zoom functionality on one chart but still allow it to be controlled by zoom functionality on another chart.
Disable automatic zoom synchronization to manage zoom levels independently.
sync: {
zoom: false,
},
Synchronization Groups Copy Link
Use groupId to synchronize charts within the same group, supporting multiple independent groups on a single page.
sync: {
groupId: 'Group 1',
},
In the above example:
- The charts on the left are synchronised with each other, as are the charts on the right.
- The top charts have their x axis and crosshair labels hidden, to give a 'combined chart' effect.
Charts without a groupId will be allocated to a default group.