Brush

Add <AreaChart.Brush /> 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 (or dataKey on <XAxis />) so the handles can label themselves with the category under each edge.

import { AreaChart } from "honestui/charts";

<AreaChart data={data} config={chartConfig} xDataKey="date">
  <AreaChart.XAxis dataKey="date" />
  <AreaChart.Brush formatLabel={(value) => String(value)} />
  <AreaChart.Area dataKey="desktop" variant="gradient" />
</AreaChart>;

The brush is available on the cartesian charts, AreaChart, LineChart, BarChart, and ComposedChart. Attach it exactly the same way on each:

<LineChart.Brush />
<BarChart.Brush />
<ComposedChart.Brush />

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 stacking and series colors, dimming alongside the main plot when a series is selected.

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.

Filtering the chart is automatic. Pass onChange when something outside the chart needs to follow along, such as a heading that reports the visible window:

const [range, setRange] = useState({ startIndex: 0, endIndex: data.length - 1 });

<AreaChart data={data} config={chartConfig} xDataKey="date">
  <AreaChart.Brush onChange={setRange} />
  <AreaChart.Area dataKey="desktop" variant="gradient" />
</AreaChart>;

// data[range.startIndex].date → data[range.endIndex].date

onChange fires with data indices, not values, so look the labels up on your own rows.

The brush uses a second ECharts grid with mirrored copies of the visible series. A transparent native dataZoom slider supplies dragging and panning, while the selection frame, dimmed regions, handles, and range labels are drawn as synchronized canvas elements.

Composed as a child of the chart root. It renders nothing itself, its presence turns the brush footer on, and its props configure it.