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.

Series A
Series B

<ScatterChartPro
  xAxis={[{ zoom: true }]}
  yAxis={[{ zoom: true }]}
  height={300}
  series={series}
  showToolbar
/>

<ScatterChartPro
  xAxis={[{ zoom: true }]}
  yAxis={[{ zoom: true }]}
  height={300}
  series={series}
  showToolbar
/>

Press Enter to start editing

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 ChartDataProvider.

Series A
Series B

<ScatterChartPro
  {...params}
  xAxis={[{ zoom: true }]}
  yAxis={[{ zoom: true }]}
  showToolbar
  slots={{ baseIconButton: CustomIconButton }}
  sx={{
    [`& .${chartsToolbarClasses.root}`]: {
      gap: 1,
      padding: 1,
      minHeight: 52,
    },
  }}
/>

<ScatterChartPro
  {...params}
  xAxis={[{ zoom: true }]}
  yAxis={[{ zoom: true }]}
  showToolbar
  slots={{ baseIconButton: CustomIconButton }}
  sx={{
    [`& .${chartsToolbarClasses.root}`]: {
      gap: 1,
      padding: 1,
      minHeight: 52,
    },
  }}
/>

Press Enter to start editing

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.

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.

Chart with Custom Toolbar

Series A
Series B

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.

Keys	Description
`Tab`	Moves focus into and out of the toolbar.
`Shift+Tab`	Moves focus into and out of the toolbar.
`Left`	Moves focus to the previous button.
`Right`	Moves focus to the next button.
`Home`	Moves focus to the first button.
`End`	Moves focus to the last button.

API

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