Charts · Interaction

Synchronised research stack

Three charts, two different engines, one crosshair and one visible range. Synchronisation is Luc UI's, not the engine's: the bus carries a normalised timestamp and window, so ECharts and Lightweight Charts follow each other without either knowing the other exists.

Cross-engine stack

Move the pointer across any pane. Scroll or drag to change the visible window; all three follow. Each chart publishes only what it owns, and a subscriber never receives its own event.

Price

Lightweight Charts · candlestick, volume pane

Funding rate

Apache ECharts · line with a zero reference

Realized volatility

Apache ECharts · area with a prepared band

Same-engine sync

A price line and a volume bar chart sharing a group. The range selector is absent on purpose: the demo is about the crosshair and the window, not about refetching.

Close

Volume

How it works

Two rules do all the work.

Normalised events

The bus carries milliseconds and a window. Each adapter converts at its own boundary: ECharts already speaks milliseconds, Lightweight Charts speaks seconds, and nothing downstream has to know that.

Loop protection

A publish carries its origin id, and a subscriber never receives its own event. While an adapter applies a remote value it sets a guard so the engine's resulting event is not re-published.

<ChartSyncGroup groupId="research-stack">
  <FinancialChart candles={candles} syncGroup="research-stack" />
  <LineChart data={rows} xKey="time" syncGroup="research-stack" series={funding} />
  <LineChart data={rows} xKey="time" syncGroup="research-stack" series={vol} />
</ChartSyncGroup>