Cross-Chart Synchronization

ApexStock.sync() links independent instances so a gesture on one is reflected on the others. It is the answer to a stacked workspace: price on top, a second instrument or a different time frame below, one shared window.

const price = new ApexStock(topEl, priceOptions)
const other = new ApexStock(bottomEl, otherOptions)

await Promise.all([price.render(), other.render()])

const link = ApexStock.sync([price, other], { zoom: true, crosshair: true })

// later
link.disconnect()
OptionDefaultMirrors
zoomtrueThe visible x-range, on pan and zoom
crosshairtrueA vertical guide at the same x on the other charts

sync returns a handle with disconnect(). Call it when the charts are torn down, or when a layout stops needing the link.

How it works, and why that matters

It is built on the public event bus plus setVisibleRange(), not on ApexCharts' native group option. That has two consequences worth knowing.

The charts stay independent. Each keeps its own axes, its own indicators, its own theme and its own state. Nothing is merged, so a synced chart is not a special kind of chart and can be unsynced at any time.

Echo is suppressed. Mirroring a range change would otherwise re-emit from every receiver and feed back around the loop. The link tracks which chart originated a change and stops it there.

The crosshair guide is a lightweight per-chart DOM overlay positioned from each chart's own axis, rather than a shared cursor. So two charts on different time frames put the guide at the same x value, not at the same pixel.

Synced panes are not this

An indicator or drawdown pane already shares the price chart's x-axis and zoom, because it is part of the same chart. sync is for separate ApexStock instances, which is what you need when the second view has its own instrument, its own time frame, or its own chart type.

See also