Multiple Synced Charts

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()
    }
  });
});