Charts - Toolbar

Add a toolbar to charts for quick access to common features.

You can enable a toolbar on charts to give users quick access to certain features. The toolbar is available on scatter, bar, line, pie, and radar charts.

To enable the toolbar, set the showToolbar prop to true on the chart component.

Custom toolbar elements

You can customize basic components, such as buttons and tooltips, by passing custom elements to the slots prop of the chart. You can use this to replace the default buttons with components from your design system.

If you're composing a custom component, you can provide these basic components as slots to ChartsDataProvider.

Custom element rendering

You can use the render prop to customize the rendering of the toolbar's elements. Pass a React element to the render prop of the ToolbarButton component to replace the default button with your own component.

This is useful when you want to render a custom component but use the toolbar's accessibility features, such as keyboard navigation and ARIA attributes, without implementing them yourself.

<ToolbarButton render={<MyButton />} />

Alternatively, you can pass a function to the render prop, which receives the props and state as arguments.

<ToolbarButton render={(props, state) => <MyButton {...props} />} />

The section below provides an example of this.

Fully custom toolbar

You can partially or entirely replace the toolbar with a custom implementation to further customize its functionality. To do so, provide a custom component to the toolbar slot.

You can use components such as Toolbar and ToolbarButton to build your own toolbar using the default components as a base, or create your own custom toolbar from scratch.

Range buttons

Range buttons allow users to quickly zoom to predefined ranges from the toolbar. They work with both time-series and ordinal (band/point) axes.

Pass the rangeButtons prop to the toolbar to configure the available ranges. Each button zooms the chart to show a specific portion of the data.

Range button values

The value property of each range button supports the following formats:

Calendar interval

Use { unit, step } to show a time period from the end of the data. The step defaults to 1. Supported units: 'year', 'month', 'week', 'day', 'hour', 'minute', 'second', 'millisecond', and 'microsecond'.

{ label: '1M', value: { unit: 'month' } }
{ label: '3M', value: { unit: 'month', step: 3 } }
{ label: '1Y', value: { unit: 'year' } }

Absolute date range

Use [startDate, endDate] to zoom to a fixed date range.

{ label: '2024 H1', value: [new Date(2024, 0, 1), new Date(2024, 6, 1)] }

Function

Use a function to compute custom zoom percentages (0–100). The function receives a params object with the axis context:

• scaleType — The axis scale type ('time', 'band', 'linear').
• data — The axis data values (available for ordinal axes).
• domain — The full domain bounds ({ min, max }). Timestamps for time axes, indices for ordinal.

{ label: 'First half', value: () => ({ start: 0, end: 50 }) }
{ label: 'Last 5 items', value: ({ data }) => {
  const count = data.length;
  return { start: ((count - 5) / (count - 1)) * 100, end: 100 };
}}

Reset

Use null to reset zoom to show all data.

{ label: 'All', value: null }

The following demo shows all value types together:

Ordinal axes

Range buttons also work with ordinal (band/point) axes. When the axis data contains date-like values, calendar intervals and absolute date ranges are matched against the data points automatically. Function values receive index-based domain bounds instead of timestamps.

Custom toolbar with range buttons

You can use ChartsToolbarRangeButtonTrigger directly in a custom toolbar to have full control over layout and behavior.

Accessibility

Toolbar follows the WAI-ARIA authoring practices.

ARIA

• The Toolbar component renders an element with the toolbar role
• The Toolbar component renders an element with aria-orientation set to horizontal
• You must apply a text label or an aria-label attribute to ToolbarButton

Keyboard

The Toolbar component supports keyboard navigation. It implements the roving tabindex pattern.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <ChartsToolbarImageExportTrigger />
• <ChartsToolbarPrintExportTrigger />
• <ChartsToolbarPro />
• <ChartsToolbarRangeButtonTrigger />
• <ChartsToolbarZoomInTrigger />
• <ChartsToolbarZoomOutTrigger />
• <Toolbar />
• <ToolbarButton />