Charts - Toolbar 🧪

Charts can display a toolbar for easier access to certain functionality.

Charts provide a toolbar that can be enabled 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

Composition 🚧

Custom elements

The toolbar can be customized to use custom elements instead of the default ones.

That is achievable by passing the custom elements to slots prop of the chart.

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

If you want to add or further customize the toolbar's functionality, you can also partially or entirely replace it and use a custom implementation.

Chart with Custom Toolbar

Series A
Series B

API

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