ChartsToolbarRangeButtonTrigger API

API reference docs for the React ChartsToolbarRangeButtonTrigger component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Charts - Toolbar

Import

import { ChartsToolbarRangeButtonTrigger } from '@mui/x-charts-pro/ChartsToolbarPro';
// or
import { ChartsToolbarRangeButtonTrigger } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

A button that sets the chart zoom to a predefined range. It renders the baseToggleButton slot.

Props

Name	Type	Default	Description
label*	string	-	The label used to identify the button for active-state tracking.
value*	Array<Date> \| func \| { step?: number, unit: 'day' \| 'hour' \| 'microsecond' \| 'millisecond' \| 'minute' \| 'month' \| 'second' \| 'week' \| 'year' }	-	The range value. Specifies how far back from the end of the data to zoom. `{ unit, step }` — A calendar interval from the end of the data (e.g., `{ unit: 'month', step: 3 }` for 3 months). `[start, end]` — An absolute date range. `(params) => { start, end }` — A function that receives axis context (`scaleType`, `data`, `domain`) and returns zoom percentages (0-100). `null` — Resets zoom to show all data.
axisId	number \| string	-	The axis ID to apply the range to. Defaults to the first x-axis with zoom enabled.
render	element \| func	-	A function to customize the rendering of the component.
size	'large' \| 'medium' \| 'small'	'small'	The size of the button.

The component cannot hold a ref.

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.