## Usage Add `` as a child of the chart root. Its presence renders the brush footer — a miniature of the **full** dataset with a draggable selection window over it. Narrowing that window filters the main chart to the selected range; the miniature always keeps showing everything, so you never lose your place. Set `xDataKey` on the root so the handles can label themselves with the value under each edge. ```svelte String(value)} /> ``` ## Example ### ```svelte String(value).split(' ')[1]} /> String(value)} /> ``` > Drag either handle to resize the range, or drag the selected region itself to pan without changing its width. Handle labels fade in while the pointer is over the brush. Mouse, touch, and pen all work. The same controls are available from the keyboard. Tab to a start or end handle, use the arrow keys to move it by one data point, and use Home or End to reach its valid boundary. Tab to the selected window to shift the complete range with the arrow keys; Home and End move that window to the beginning or end. The handles never cross, and reduced-motion preferences disable the positioning springs. ## Supported Charts The brush is available on the cartesian charts — `EvilAreaChart`, `EvilLineChart`, `EvilBarChart`, and `EvilComposedChart`. Attach it exactly the same way on each: ```svelte ``` The miniature mirrors the chart it belongs to. Area and composed charts draw filled areas, line charts draw strokes only, and bar charts draw rounded bars — and it inherits the parent chart's `curveType`, stacking, bar radius, and series colors, so the footer always reads as the same chart in small. The brush is hidden while the chart is in its loading state, and it never renders for the non-cartesian charts (pie, radar, radial, sankey), which have no continuous axis to zoom. ## Reacting to the Range Filtering the chart is automatic — the root already slices its data to the selection. Pass `onChange` when something _outside_ the chart needs to follow along, such as a heading that reports the visible window: ```svelte (range = next)} /> ``` `onChange` fires with data **indices**, not values, so look the labels up on your own rows. ## API Reference ### Brush Composed as a child of the chart root. It renders nothing itself — its presence turns the brush footer on, and its props configure it. ### `height` type: `number` · default: `56` Height of the brush preview strip in pixels. ### `formatLabel` type: `(value: unknown, index: number) => string` Formats the range-handle labels from the `xDataKey` value under each edge. Defaults to the raw value. ### `onChange` type: `(range: { startIndex: number; endIndex: number }) => void` Fires as the selection moves, with the inclusive data indices of the visible range. ### Root ### `xDataKey` type: `string` The data key the handle labels read from. Without it the handles fall back to raw indices.