Skip to contentSkip to content

ChartsDataProvider API

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

Demos

Import

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

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

Props

NameTypeDefaultDescription
colorsArray<string>
| func
rainbowSurgePalette

Color palette used to colorize multiple series.

datasetArray<DatasetElementType>-

An array of objects that can be used to populate series and axes data using their dataKey property.

experimentalFeaturesany-

Options to enable features planned for the next major.

heightnumber-

The height of the chart in px. If not defined, it takes the height of the parent element.

idstring-

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.

localeTextPartial-

Localized text for chart components.

marginnumber
| { 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.

pluginsConvertSignaturesIntoPlugins-

Array of plugins used to add features to the chart.

seriesArray<BarSeriesType | LineSeriesType | ScatterSeriesType | PieSeriesType> | RadarSeriesType | HeatmapSeriesType | FunnelSeriesType | SankeySeriesType | RangeBarSeriesType | OHLCSeriesType>-

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.

seriesConfigChartSeriesConfig & ChartSeriesConfig-

The configuration for the series types. This is used to define how each series type should be processed, colored, and displayed.

skipAnimationbool-

If true, animations are skipped. If unset or false, the animations respects the user's prefers-reduced-motion setting.

slotPropsPartial-

The props for the slots.

slotsPartial-

Slots to customize charts' components.

See Slots API below for more details.

widthnumber-

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 nameClass nameDefault componentDescription
baseButton
baseIconButton

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.