ChartsDataProviderPro API

API reference docs for the React ChartsDataProviderPro 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 - Composition

Import

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

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

Orchestrates the data providers for the chart components and hooks.

Use this component if you have custom HTML components that need to access the chart data.

Props

Name	Type	Default	Description
apiRef	{ current?: any }	-	The ref object that exposes the chart API methods.
colors	Array<string> \| func	rainbowSurgePalette	Color palette used to colorize multiple series.
dataset	Array<object>	-	An array of objects that can be used to populate series and axes data using their `dataKey` property.
experimentalFeatures	{ keyboardActivation?: bool }	-	Options to enable features planned for the next major.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
id	string	-	This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
localeText	object	-	Localized text for chart components.
margin	number \| { bottom?: number, left?: number, right?: number, top?: number }	-	The margin between the SVG and the drawing area. It's used for leaving some space for extra information such as the x- and y-axis or legend. Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
series	Array<object>	-	The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it.
skipAnimation	bool	-	If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
slotProps	object	-	The props for the slots.
slots	object	-	Slots to customize charts' components. See Slots API below for more details.
theme	'dark' \| 'light'	-	The color mode passed to `colors` when it is a function. Defaults to the mode of the Material UI theme.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.

The component cannot hold a ref.

Slots

Slot name	Default component	Description
baseButton	`Button`	The component used for buttons.
baseDivider	`Divider`	The component used for dividers.
baseIconButton	`IconButton`	The component used for icon buttons.
baseMenuItem		The component used for menu items.
baseMenuList	`MenuList`	The component used for menu lists.
basePopper		The component used for poppers.
baseToggleButton		Note: MUI's `ToggleButton` has an incompatible `href` prop, so it must be cast: `ToggleButton as unknown as React.ComponentType<ChartBaseToggleButtonProps & BaseToggleButtonPropsOverrides>`.
baseToggleButtonGroup	`ToggleButtonGroup`	The component used for toggle button groups.
baseTooltip	`Tooltip`	The component used for tooltips.
exportIcon	`ChartsExportIcon`	Icon displayed on the toolbar's export button.
zoomInIcon	`ChartsZoomInIcon`	Icon displayed on the toolbar's zoom in button.
zoomOutIcon	`ChartsZoomOutIcon`	Icon displayed on the toolbar's zoom out button.

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.