AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
Skills
Core features
Specialised Charts
Org ChartQuadrant Chart
Series
BarLineAreaScatterBubblePieDonutCombinationBox PlotCandlestickOHLCHeatmapHistogramNightingaleRadar AreaRadar LineRadial BarRadial ColumnRange AreaRange BarWaterfallSunburstTreemapSankeyChordFunnelCone FunnelPyramid
Gauges
Radial GaugeLinear Gauge

JavaScript ChartsSynchronized Charts

Version 14.2.0
Enterprise

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 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 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.

API Reference Copy Link

Properties available on the AgChartSyncOptions interface.

enabled boolean
Toggles the synchronization feature. It is implicitly enabled when configuration options are provided; otherwise, it defaults to `false`.
groupId string
Specifies the synchronization group identifier for the chart. Omitting this assigns the chart to a default synchronization group.
axes 'x' | 'y' | 'xy' default: x
Determines the axes to be synchronized across charts.
nodeInteraction boolean default: true
Enables synchronization of node interactions across charts.
zoom boolean default: true
Enables synchronization of zoom actions across charts.