Brush overlay

Single absolute-positioned div spanning the chart stack. Reads brush fractions from ChartSyncProvider and paints a selection rect with edge indicators.

Primitive: BrushOverlay

Interactive demo

Usage

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

<ChartSyncProvider dataLength={data.length}>
  <BrushOverlay paddingLeft={48} paddingRight={64} />
  <ChartRoot data={data} height={200}>
    <ChartZoomHandler />
  </ChartRoot>
</ChartSyncProvider>

Props

PropTypeDefaultDescription
paddingLeftnumber48Left padding to align with chart plot area
paddingRightnumber64Right padding to align with chart plot area