Skip to content

ResponsiveChartContainer API

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

Demos

Import

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

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

Props

NameTypeDefaultDescription
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.

colorsArray<string>
| func		blueberryTwilightPalette

Color palette used to colorize multiple series.

datasetArray<object>-

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

disableAxisListenerboolfalse

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

heightnumber-

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

margin{ bottom?: number, left?: number, right?: number, top?: number }object Depends on the charts type.

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.

widthnumber-

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

xAxisArray<{ axisId?: number
| string, classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }
| { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }, 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>		-

The configuration of the x-axes. If not provided, a default axis config is used. An array of AxisConfig objects.

yAxisArray<{ axisId?: number
| string, classes?: object, colorMap?: { color: Array<string>
| func, max?: Date
| number, min?: Date
| number, type: 'continuous' }
| { colors: Array<string>, thresholds: Array<Date
| number>, type: 'piecewise' }
| { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date
| number
| string> }, 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, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }>		-

The configuration of the y-axes. If not provided, a default axis config is used. An array of AxisConfig objects.

The component cannot hold a ref.