Skip to main content

Brush

A year of daily API requests, with a brush under the chart that zooms it into a range of days. The line above each chart names the selected days and their total.

Drag the brushes, hover the charts, switch the site theme or resize the window
Pick a preset to reconfigure every chart
Chart.jsv4.5.1
Not available

No brush or range selector: selecting a range takes a community plugin such as chartjs-plugin-selectdrag. The official chartjs-plugin-zoom does draw the Zoom box preset (zoom: { drag: { enabled: true }, mode: 'xy' }).

Source
Nivov0.99.0
Not available

No brush: a prototype (pull request #563) was never merged, so a range selection takes a custom layer with d3-brush.

Source
AG Chartsv14.2.0
Only in the paid edition

The Navigator, a range selector with a mini chart, is an Enterprise feature.

Source
Observable Plotv0.6.17
Not available

No brush (issue #5 is open): you attach d3-brush to the returned SVG and convert pixels with plot.scale('x').invert.

Source

What to look for​

  • Drag a handle. The Unovis Brush sits in a small chart of its own and sets the main chart's xDomain; scaleByDomain fits the y axis to the selected days. Recharts' <Brush> and ECharts' dataZoom slider live inside the chart and fit the y axis too. In Vega-Lite, an interval selection on an overview view sets the x domain of the main view, as in its overview + detail example; the y axis keeps the whole year's range. TanStack Charts' brushX reports a range, and the demo filters the rows and sets the x domain itself.
  • Move the range. Unovis moves a range only by its handles unless you turn on draggable, which the 30-day window preset does. In the other libraries, dragging inside the selection moves it by default.
  • Start without a selection. The Unovis, Recharts, ECharts and TanStack brushes start on the whole year with a handle at each end; Vega-Lite starts empty, and you drag out a range on the overview.
  • Randomize the data. Unovis keeps the selected days and animates the chart. Recharts draws its brush across the whole year again while the chart stays on the selected days.
  • Chart.js, Nivo, AG Charts and Observable Plot. Chart.js, Nivo and Plot have no brush (Chart.js' official zoom plugin can drag a zoom box), and AG Charts' Navigator is an Enterprise feature.
  • Presets. 30-day window (selection, draggable) is one every library here can draw: Recharts takes data indices, the others dates. Outside handles (handlePosition, handleWidth) sets 14-pixel handles: Recharts (travellerWidth) and TanStack Charts (handleSize, 24 pixels by default) set the width, ECharts takes a handle icon whose shape gives the width, and none of them has an option for where the handles sit. Vega-Lite's interval selection has no handles. Zoom box (VisFreeBrush with mode: xy) zooms both axes into a rectangle you drag on the chart; only ECharts has it built in, as the toolbox's dataZoom feature, which the demo switches on with a takeGlobalCursor action; Chart.js gets it from its official chartjs-plugin-zoom (drag.enabled with mode: 'xy'). Recharts' docs build one from mouse events and a ReferenceArea, TanStack Charts brushes and zooms the x axis only, and a Vega-Lite rectangle selection sets the domains of another view, not its own.

Feature comparison​

FeatureUnovis1.8.0Recharts3.10.1Chart.js4.5.1ECharts6.1.0Nivo0.99.0AG Charts14.2.0Observable Plot0.6.17Vega-Lite6.5.0TanStack Charts1.1.0
Brush / range selection
Zoom and pan XY charts
Crosshair with a shared tooltip
Animated data updates
Dark mode

Every cell links to its source. See how we compare for the rules we followed.