Chart Synchronization Demo

Link two charts with linkCharts / ChartGroup. Zoom or pan one chart — the other follows based on the selected sync mode.

xZoom or pan one chart — the other follows via ChartGroup

Chart 1 - Temperature

Chart 2 - Humidity

Cursor Sync: ON

Sync Modes

Mode	Description
X-Axis Sync	Shared time/index range; Y independent per chart
Y-Axis Sync	Shared value range; X independent
Both Axes	Full viewport lock
No Sync	Independent charts

Toggle modes with the buttons above the demo. Cursor sync can be toggled separately.

Using ChartGroup

import { createChart, linkCharts } from 'velo-plot/full';

const chart1 = createChart({ container: el1, id: 'temp' });
const chart2 = createChart({ container: el2, id: 'humidity' });

const group = linkCharts(chart1, chart2, {
  axis: 'x',
  bidirectional: true,
  syncCursor: true,
  syncZoom: true,
  syncPan: true,
});

// Runtime
group.syncAxis('xy');
group.syncCursor(false);
group.updateOptions({ syncZoom: false });

Master-Slave

When only one chart should drive sync:

import { createMasterSlave } from 'velo-plot/full';

createMasterSlave(priceChart, volumeChart, 'x');

Coordinated Fit

group.fitAll();
group.resetAll();

group.batch(() => {
  chart1.zoom({ x: [t0, t1], animate: false });
  chart2.fit({ x: [t0, t1] });
});

Stacked Alternative

For vertical price / volume / RSI layouts, prefer createStackedChart:

createStackedChart({
  masterPaneId: 'price',
  sync: { axis: 'x', bidirectional: true },
  resizable: true,
  panes: [price, volume, wave, rsi],
});

See Also

• API Reference
• Pane Stack Example