Crosshair time label

Floating timestamp pill that tracks the crosshair X position. Place as a zero-height sibling between charts and scrubber. Ref-based.

Primitive: CrosshairTimeLabel

Interactive demo

Usage

import { ChartSyncProvider, CrosshairTimeLabel } from '@ramtt/charts'

<ChartSyncProvider dataLength={data.length}>
  {/* …charts… */}
  <CrosshairTimeLabel format={(i) => labels[i]} padLeft={48} padRight={64} />
</ChartSyncProvider>

Props

Prop	Type	Default	Description
format*	`(index: number) => string`	—	Convert full data index to display string
padLeft	`number`	48	Left padding to align with chart
padRight	`number`	64	Right padding to align with chart