Sync provider

Context provider sharing pointer hover, zoom range, brush state, and interacting flag across all child charts. Required for crosshair sync, navigator, scrubber, brush.

Primitive: ChartSyncProvider· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartSyncProvider, ChartRoot, ChartCrosshair } from '@ramtt/charts'

<ChartSyncProvider dataLength={data.length} zoomMode="brush">
  <ChartRoot data={a} height={120}><ChartCrosshair /></ChartRoot>
  <ChartRoot data={b} height={120}><ChartCrosshair /></ChartRoot>
</ChartSyncProvider>

Props

PropTypeDefaultDescription
dataLength*number—Total length of the underlying dataset (for zoom math)
zoomMode'brush' | 'navigator' | 'none''brush'Zoom interaction strategy
children*ReactNode—Synced charts and overlays