---
title: "Synchronized Charts"
enterprise: true
framework: javascript
version: "14.1.0"
---

# Synchronized Charts

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

## Synchronization

#### Basic Synchronization

```ts
import {
  AgChartOptions,
  AgCharts,
  AnimationModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NavigatorModule,
  NumberAxisModule,
  SyncModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
} from "ag-charts-enterprise";
import { AAPL, MSFT } from "./data";

const commonOptions: AgChartOptions = {
  minWidth: 0,
  minHeight: 0,
  series: [
    {
      type: "line",
      xKey: "date",
      yKey: "value",
    },
  ],
  sync: {
    enabled: true,
    axes: "x",
    nodeInteraction: true,
  },
  zoom: {
    enabled: true,
    enableSelecting: true,
  },
  axes: {
    x: {
      type: "unit-time",
      interval: {
        maxSpacing: 180,
      },
      crosshair: {
        label: {
          format: "%d %b %Y",
        },
      },
    },
    y: {
      type: "number",
      label: {
        format: "$~s",
      },
    },
  },
};
ModuleRegistry.registerModules([
  AnimationModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NavigatorModule,
  NumberAxisModule,
  SyncModule,
  TimeAxisModule,
  UnitTimeAxisModule,
  ZoomModule,
  ContextMenuModule,
]);

const chartOptions1 = {
  ...commonOptions,

  data: AAPL,
  title: {
    text: "Apple (AAPL)",
    textAlign: "left",
  },
};

chartOptions1.container = document.getElementById("myChart1");

const chartOptions2 = {
  ...commonOptions,

  data: MSFT,
  title: {
    text: "Microsoft (MSFT)",
    textAlign: "left",
  },
  navigator: {
    enabled: true,
  },
  initialState: {
    zoom: {
      ratioX: { start: 0.8, end: 1 },
    },
  },
};

chartOptions2.container = document.getElementById("myChart2");

AgCharts.create(chartOptions1);
AgCharts.create(chartOptions2);
```

[Live example: Basic Synchronization](https://www.ag-grid.com/charts/typescript/sync/examples/basic-sync)

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.

```js
{
    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.

> **Note**
>
> All synchronized axes must have the same values for their `min`, `max`, `nice` and `reverse` properties.

### Axes Domain

Synchronize the axis domain of multiple charts, to ensure they all show the same domain range.

#### Axes Synchronization

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  ModuleRegistry,
  NumberAxisModule,
  SyncModule,
} from "ag-charts-enterprise";
import { currentData, historicalData } from "./data";

const commonOptions: AgCartesianChartOptions = {
  sync: {
    axes: "y",
    nodeInteraction: false,
  },
  title: {
    text: "Renewable Fuel Sources",
  },
  axes: {
    y: {
      type: "number",
      crosshair: { enabled: false },
    },
    x: {
      type: "category",
      crosshair: { enabled: false },
      label: {
        autoRotate: false,
      },
    },
  },
  series: [
    {
      type: "bar",
      xKey: "year",
      yKey: "Offshore wind",
      yName: "Offshore Wind",
    },
    {
      type: "bar",
      xKey: "year",
      yKey: "Landfill gas",
      yName: "Landfill Gas",
    },
    {
      type: "bar",
      xKey: "year",
      yKey: "Plant biomass",
      yName: "Plant Biomass",
    },
  ],
};
ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  NumberAxisModule,
  SyncModule,
  ContextMenuModule,
]);

const chartOptions1 = {
  ...commonOptions,

  subtitle: {
    text: "Historical Data",
  },
  data: historicalData,
};

chartOptions1.container = document.getElementById("myChart1");

const chartOptions2 = {
  ...commonOptions,

  subtitle: {
    text: "Current Data",
  },
  data: currentData,
};

chartOptions2.container = document.getElementById("myChart2");

AgCharts.create(chartOptions1);
AgCharts.create(chartOptions2);
```

[Live example: Axes Synchronization](https://www.ag-grid.com/charts/typescript/sync/examples/axes-sync)

```js
{
    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.

For multi-series charts, series with matching `_Key` configurations will be matched together.

#### Multi-Series Synchronization

```ts
import {
  AgCartesianChartOptions,
  AgCharts,
  AnimationModule,
  BarSeriesModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  SyncModule,
  UnitTimeAxisModule,
} from "ag-charts-enterprise";
import { regionAdata, regionBdata } from "./data";

const commonOptions: AgCartesianChartOptions = {
  sync: { axes: "xy" },
  series: [
    {
      type: "bar",
      xKey: "date",
      yKey: "domestic",
      yName: "Domestic",
    },
    {
      type: "bar",
      xKey: "date",
      yKey: "international",
      yName: "International",
    },
    {
      type: "line",
      xKey: "date",
      yKey: "product",
      yName: "Product",
      yKeyAxis: "ySecondary",
    },
    {
      type: "line",
      xKey: "date",
      yKey: "services",
      yName: "Services",
      yKeyAxis: "ySecondary",
    },
  ],
  axes: {
    x: {
      type: "unit-time",
    },
    y: {
      type: "number",
      position: "left",
      max: 100,
    },
    ySecondary: {
      type: "number",
      position: "right",
    },
  },
  tooltip: { mode: "single" },
};
ModuleRegistry.registerModules([
  AnimationModule,
  BarSeriesModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  SyncModule,
  UnitTimeAxisModule,
  ContextMenuModule,
]);

const chartOptions1 = {
  ...commonOptions,

  title: {
    text: "Region A",
  },
  data: regionAdata,
};

chartOptions1.container = document.getElementById("myChart1");

const chartOptions2 = {
  ...commonOptions,

  title: {
    text: "Region B",
  },
  data: regionBdata,
};

chartOptions2.container = document.getElementById("myChart2");

AgCharts.create(chartOptions1);
AgCharts.create(chartOptions2);
```

[Live example: Multi-Series Synchronization](https://www.ag-grid.com/charts/typescript/sync/examples/multi-series-sync)

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

```js
{
    sync: {
        nodeInteraction: false,
    },
}
```

> **Note**
>
> 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

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.

```js
{
    sync: {
        zoom: false,
    },
}
```

## Synchronization Groups

Use `groupId` to synchronize charts within the same group, supporting multiple independent groups on a single page.

#### Group Synchronization

```ts
import {
  AgCartesianChartOptions,
  AgChartOptions,
  AgCharts,
  AnimationModule,
  CategoryAxisModule,
  ContextMenuModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  ModuleRegistry,
  NumberAxisModule,
  SyncModule,
  ZoomModule,
} from "ag-charts-enterprise";
import {
  costsProductA,
  costsProductB,
  salesProductA,
  salesProductB,
} from "./data";

const commonOptions: AgCartesianChartOptions = {
  minWidth: 0,
  minHeight: 0,
  tooltip: {
    enabled: false,
  },
  zoom: {
    enabled: true,
  },
};
const topChartAxis: AgCartesianChartOptions = {
  axes: {
    x: {
      type: "category",
      label: { enabled: false },
      line: { enabled: false },
      crosshair: {
        enabled: true,
        label: { enabled: false },
      },
    },
  },
};
const bottomChartAxis: AgCartesianChartOptions = {
  axes: {
    x: {
      type: "category",
      label: { autoRotate: false },
      crosshair: { enabled: true },
    },
  },
};
ModuleRegistry.registerModules([
  AnimationModule,
  CategoryAxisModule,
  CrosshairModule,
  LegendModule,
  LineSeriesModule,
  NumberAxisModule,
  SyncModule,
  ZoomModule,
  ContextMenuModule,
]);

const chartOptions1 = {
  ...commonOptions,
  ...topChartAxis,

  sync: {
    enabled: true,
    groupId: "sales",
  },
  subtitle: { text: "Product A", textAlign: "left" },
  data: salesProductA,
  padding: { bottom: 5 },
  series: [
    {
      type: "line",
      xKey: "quarter",
      yKey: "sales",
    },
  ],
};

chartOptions1.container = document.getElementById("myChart1");

const chartOptions2 = {
  ...commonOptions,
  ...topChartAxis,

  sync: {
    enabled: true,
    groupId: "costs",
  },
  subtitle: { text: "Product A", textAlign: "left" },
  data: costsProductA,
  series: [
    {
      type: "line",
      xKey: "quarter",
      yKey: "costs",
      stroke: "#FCA03A",
      marker: { fill: "#FCA03A" },
    },
  ],
};

chartOptions2.container = document.getElementById("myChart2");

const chartOptions3 = {
  ...commonOptions,
  ...bottomChartAxis,

  sync: {
    enabled: true,
    groupId: "sales",
  },
  subtitle: { text: "Product B", textAlign: "left" },
  data: salesProductB,
  series: [
    {
      type: "line",
      xKey: "quarter",
      yKey: "sales",
    },
  ],
};

chartOptions3.container = document.getElementById("myChart3");

const chartOptions4 = {
  ...commonOptions,
  ...bottomChartAxis,

  sync: { enabled: true, groupId: "costs" },
  subtitle: { text: "Product B", textAlign: "left" },
  data: costsProductB,
  series: [
    {
      type: "line",
      xKey: "quarter",
      yKey: "efficiency",
      stroke: "#FCA03A",
      marker: { fill: "#FCA03A" },
    },
  ],
};

chartOptions4.container = document.getElementById("myChart4");

AgCharts.create(chartOptions1);
AgCharts.create(chartOptions2);
AgCharts.create(chartOptions3);
AgCharts.create(chartOptions4);
```

[Live example: Group Synchronization](https://www.ag-grid.com/charts/typescript/sync/examples/group-sync)

```js
{
    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.

> **Note**
>
> Charts without a `groupId` will be allocated to a default group.

## API Reference

#### Chart Synchronization

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| 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' | x | Determines the axes to be synchronized across charts. |
| nodeInteraction | boolean | true | Enables synchronization of node interactions across charts. |
| zoom | boolean | true | Enables synchronization of zoom actions across charts. |