ChartContainerPro API
API reference docs for the React ChartContainerPro component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { ChartContainerPro } from '@mui/x-charts-pro/ChartContainerPro';
// or
import { ChartContainerPro } from '@mui/x-charts-pro';
Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
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. |
colors | Array<string> | func | blueberryTwilightPalette | 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 |
disableAxisListener | bool | false | If |
height | number | - | The height of the chart in px. If not defined, it takes the height of the parent element. |
highlightedItem | { dataIndex?: number, seriesId?: number | string } | - | The item currently highlighted. Turns highlighting into a controlled prop. |
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: |
onHighlightChange | func | - | The callback fired when the highlighted item changes. Signature: function(highlightedItem: HighlightItemData | null) => void
|
onZoomChange | func | - | Callback fired when the zoom has changed. Signature: function(zoomData: Array
|
plugins | Array<object> | - | An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts. |
skipAnimation | bool | - | If |
width | number | - | The width of the chart in px. If not defined, it takes the width of the parent element. |
xAxis | Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date | number | string> } | { color: Array<string> | func, max?: Date | number, min?: Date | number, type: 'continuous' } | { colors: Array<string>, thresholds: Array<Date | number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' | 'strict' | func, fill?: string, hideTooltip?: bool, id?: number | string, label?: string, labelStyle?: object, max?: Date | number, min?: Date | number, position?: 'bottom' | 'top', reverse?: bool, scaleType?: 'band' | 'linear' | 'log' | 'point' | 'pow' | 'sqrt' | 'time' | 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func | object | bool> | func | object, 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, zoom?: { filterMode?: 'discard' | 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number } | bool }> | - | The configuration of the x-axes. If not provided, a default axis config is used. An array of AxisConfig objects. |
yAxis | Array<{ classes?: object, colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date | number | string> } | { color: Array<string> | func, max?: Date | number, min?: Date | number, type: 'continuous' } | { colors: Array<string>, thresholds: Array<Date | number>, type: 'piecewise' }, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' | 'strict' | func, fill?: string, hideTooltip?: bool, id?: number | string, label?: string, labelStyle?: object, max?: Date | number, min?: Date | number, position?: 'left' | 'right', reverse?: bool, scaleType?: 'band' | 'linear' | 'log' | 'point' | 'pow' | 'sqrt' | 'time' | 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func | object | bool> | func | object, 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, zoom?: { filterMode?: 'discard' | 'keep', maxEnd?: number, maxSpan?: number, minSpan?: number, minStart?: number, panning?: bool, step?: number } | bool }> | - | The configuration of the y-axes. If not provided, a default axis config is used. An array of AxisConfig objects. |
zAxis | Array<{ colorMap?: { colors: Array<string>, type: 'ordinal', unknownColor?: string, values?: Array<Date | number | string> } | { color: Array<string> | func, max?: Date | number, min?: Date | number, type: 'continuous' } | { colors: Array<string>, thresholds: Array<Date | number>, type: 'piecewise' }, data?: array, dataKey?: string, id?: string, max?: number, min?: number }> | - | The configuration of the z-axes. |
zoom | Array<{ axisId: number | string, end: number, start: number }> | - | The list of zoom data related to each axis. |
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.