Skip to content
Influence MUI X's 2024 roadmap! Participate in the latest Developer Survey

ChartContainer API

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

Component demos

Import

import { ChartContainer } from '@mui/x-charts/ChartContainer';
// or
import { ChartContainer } from '@mui/x-charts';
Learn about the difference by reading this guide on minimizing bundle size.

Props

heightRequired

The height of the chart in px.

Type:number

seriesRequired

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.

Type:Array<object>

widthRequired

The width of the chart in px.

Type:number

colors

Color palette used to colorize multiple series.

Type:Array<string>
| func

Default:blueberryTwilightPalette

dataset

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

Type:Array<object>

disableAxisListener

If true, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.

Type:bool

Default:false

margin

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 an object with the optional properties: top, bottom, left, and right.

Type:{ bottom?: number, left?: number, right?: number, top?: number }

Default:object Depends on the charts type.

xAxis

The configuration of the x-axes. If not provided, a default axis config is used with id set to DEFAULT_X_AXIS_KEY.

Type:Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>

yAxis

The configuration of the y-axes. If not provided, a default axis config is used with id set to DEFAULT_Y_AXIS_KEY.

Type:Array<{ axisId?: number
| string, classes?: object, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, fill?: string, hideTooltip?: bool, id?: number
| string, label?: string, labelFontSize?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, position?: 'bottom'
| 'left'
| 'right'
| 'top', reverse?: bool, scaleType?: 'band'
| 'linear'
| 'log'
| 'point'
| 'pow'
| 'sqrt'
| 'time'
| 'utc', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number, valueFormatter?: func }>

The component cannot hold a ref.