React ChartsSynchronized Charts

ReactAngularVueJavascript

Enterprise

Synchronize multiple charts to align data insights and interactive elements, offering a unified analysis experience.

Synchronization

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.

Axes Domain

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 y axes have been synchronized. The values on each x axis are different.
• Changing the automatic y axis domain range by clicking the legend items in one chart, will change the y axis domain range in the other.
• The nodeInteraction synchronization is disabled, and zoom is not enabled on either chart.

Node Interaction

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.

This synchronisation is enabled by default. To disable, set nodeInteraction to false.

sync: {
    nodeInteraction: false,
},

Zoom

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

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.

API Reference