Brush & ZoomPan

Interactive range selection and zoom/pan for charts. Brush allows selecting a data range; ZoomPan enables zooming and panning the view.

Import

import { ChartBrush, ChartZoomPan } from 'reaviz';

ChartBrush Props

Most props are set internally by the parent chart. User-configurable:

BrushChangeEvent

interface BrushChangeEvent {
  start?: number;
  end?: number;
}

ChartZoomPan Props

Most props are set internally by the parent chart. User-configurable:

ZoomPanChangeEvent

interface ZoomPanChangeEvent {
  domain: [ChartDataTypes, ChartDataTypes];
  isZoomed: boolean;
}

Adding Brush to a Chart

<AreaChart
  data={data}
  brush={<ChartBrush />}
/>

Brush with Callback

<AreaChart
  data={data}
  brush={
    <ChartBrush
      onBrushChange={(e) => console.log('Range:', e.start, e.end)}
    />
  }
/>

Adding ZoomPan to a Chart

<AreaChart
  data={data}
  zoomPan={<ChartZoomPan />}
/>

ZoomPan with Controlled Domain

const [domain, setDomain] = useState<[Date, Date]>();

<AreaChart
  data={data}
  zoomPan={
    <ChartZoomPan
      domain={domain}
      onZoomPan={(e) => setDomain(e.domain)}
    />
  }
/>

Require Modifier Key for Zoom

<ChartZoomPan requireZoomModifier />

Disable Mouse Wheel Zoom

<ChartZoomPan disableMouseWheel />

Pan Only (No Zoom)

<ChartZoomPan zoomable={false} pannable />

Notes

• Pass brush or zoomPan as a chart prop — they are null by default
• Brush renders a draggable selection overlay at the bottom of the chart
• ZoomPan changes the chart's visible domain without modifying data
• Both components fire callbacks with the new data range for controlled usage
• Brush and ZoomPan are supported on AreaChart, LineChart, and ScatterPlot