ChartsToolbarPro API
API reference docs for the React ChartsToolbarPro component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { ChartsToolbarPro } from '@mui/x-charts-pro/ChartsToolbarPro';
// or
import { ChartsToolbarPro } from '@mui/x-charts-pro';Learn about the difference by reading this guide on minimizing bundle size.
The chart toolbar component for the pro package.
| Name | Type | Description |
|---|---|---|
| rangeButtons | Array<{ label: string, value?: Array<Date> | func | { step?: number, unit: 'day' | 'hour' | 'microsecond' | 'millisecond' | 'minute' | 'month' | 'second' | 'week' | 'year' } }> | Configuration for range buttons shown in the toolbar. Each button zooms the chart to a predefined time range from the end of the data. |
| rangeButtonsAxisId | number | string | The axis ID to apply range buttons to. Defaults to the first x-axis with zoom enabled and a time scale. |
The component cannot hold a ref.
| Slot name | Class name | Default component | Description |
|---|---|---|---|
| toolbar | ChartsToolbar | Custom component for the toolbar. |
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.