useViewRange
Brush zoom + scroll-to-zoom state management hook.
Manages the visible data range for charts with zoom capabilities. Handles brush slider state, scroll-to-zoom on the chart area, and initial zoom positioning.
Usage
import { useViewRange } from "@exhibit/charts";
const { viewRange, setViewRange, handleBrushChange, chartRef } = useViewRange({
dataLength: data.length,
defaultZoom: { start: 30, end: 70 },
minVisibleItems: 20,
zoomFactor: 0.08,
});
const visibleData = data.slice(viewRange.start, viewRange.end + 1);Parameters
| Option | Type | Default | Description |
|---|---|---|---|
dataLength | number | required | Total number of data points |
defaultZoom | { start: number; end: number } | — | Initial zoom as percentages (0-100) |
minVisibleItems | number | 20 | Minimum number of items visible when zoomed in |
zoomFactor | number | 0.08 | How much each scroll event zooms (0-1) |
Return value
| Field | Type | Description |
|---|---|---|
viewRange | { start: number; end: number } | Current visible index range |
setViewRange | Dispatch<SetStateAction<...>> | Direct state setter |
handleBrushChange | (range: any) => void | Callback for ChartBrushSlider |
chartRef | RefObject<HTMLDivElement> | Ref to attach to the chart container for scroll-to-zoom |
Scroll-to-zoom
Attach chartRef to the wrapping <div> to enable scroll-to-zoom:
<div ref={chartRef}>
<ResponsiveContainer>
<LineChart data={visibleData}>
{/* ... */}
</LineChart>
</ResponsiveContainer>
</div>The hook registers a wheel event listener with { passive: false } to prevent page scrolling while zooming.
Default zoom
The defaultZoom option converts percentage values to data indices:
// Show the last 10% of data
useViewRange({ dataLength: 1000, defaultZoom: { start: 90, end: 100 } })
// viewRange = { start: 900, end: 999 }