Version: 1.0.0

Multiple Synced Charts

Sync timescale zooming, panning offset, and crosshair coordinates across multiple chart viewports.

Overview

Synched layouts display multiple charts (e.g. daily, 4-hour, and 1-hour timeframes) simultaneously. Zooming or panning one chart automatically mirrors the timeline offset coordinates onto the adjacent charts.

Syncing Zoom & Pan

Zooming and panning modify two attributes inside the chart context:

candleWidth: Horizontal pixel width allocated per bar. Decreasing this zooms out; increasing zooms in.
offset: Horizontal scroll position shift.

Synchronization Code

To synchronize zoom and scroll events, listen to timeframe updates and sync settings using setters:

// Synchronizing chartA scale modifications onto chartB
chartA.subscribeVisibleRangeChanged((range) => {
  chartB.applyOptions({
    timeScale: {
      rightOffset: chartA.timeScale().rightOffset(),
      barSpacing: chartA.timeScale().barSpacing()
    }
  });
});