Skip to contentSkip to content
🚀 Influence MUI X's 2025 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.

Demos

Import

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

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



It sets up the data providers as well as the <svg> for the chart.

This is a combination of both the ChartDataProvider and ChartsSurface components.

Props

Props of the native component are also available.

NameTypeDefaultDescription
colorsArray<string>
| func		rainbowSurgePalette

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.

disableVoronoibool-

If true, the voronoi interaction are ignored.

heightnumber-

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 highlighted item. Used when the highlight is controlled.

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.

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.

onAxisClickfunc-

The function called for onClick events. The second argument contains information about all line/bar elements at the current mouse position.

Signature:function(event: MouseEvent, data: null | AxisData) => void
  • event The mouse event recorded on the <svg/> element.
  • data The data about the clicked axis and items associated with it.
onHighlightChangefunc-

The callback fired when the highlighted item changes.

Signature:function(highlightedItem: HighlightItemData | null) => void
  • highlightedItem The newly highlighted item.
onItemClickfunc-

Callback fired when clicking close to an item. This is only available for scatter plot for now.

Signature:function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void
  • event Mouse event caught at the svg level
  • scatterItemIdentifier Identify which item got clicked
radiusAxisArray<{ classes?: object, colorMap?: { 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, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, maxRadius?: number, min?: Date
| number, minRadius?: number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', 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 }>		-

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

rotationAxisArray<{ barGapRatio?: number, categoryGapRatio?: number, 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, startAngle?: number, 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 }
| { 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, startAngle?: number, 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 }
| { classes?: object, colorMap?: { 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, startAngle?: number, 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 }
| { classes?: object, colorMap?: { 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, startAngle?: number, 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 }
| { classes?: object, colorMap?: { 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, startAngle?: number, 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 }
| { classes?: object, colorMap?: { 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, startAngle?: number, 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 }
| { classes?: object, colorMap?: { 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, startAngle?: number, 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 }
| { classes?: object, colorMap?: { 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, endAngle?: number, fill?: string, height?: number, hideTooltip?: bool, id: number
| string, ignoreTooltip?: bool, label?: string, labelGap?: number, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, startAngle?: number, 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 }>		-

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

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

skipAnimationbool-

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

voronoiMaxRadiusnumber-

Defines the maximal distance between a scatter point and the pointer that triggers the interaction. If undefined, the radius is assumed to be infinite.

widthnumber-

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

xAxisArray<{ axis?: 'x', barGapRatio?: number, categoryGapRatio?: number, 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }
| { axis?: 'x', 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }
| { axis?: 'x', classes?: object, colorMap?: { 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }
| { axis?: 'x', classes?: object, colorMap?: { 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }
| { axis?: 'x', classes?: object, colorMap?: { 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }
| { axis?: 'x', classes?: object, colorMap?: { 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }
| { axis?: 'x', classes?: object, colorMap?: { 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, tickLabelPlacement?: 'middle'
| 'tick', tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickPlacement?: 'end'
| 'extremities'
| 'middle'
| 'start', tickSize?: number, valueFormatter?: func }
| { axis?: 'x', classes?: object, colorMap?: { 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, height?: number, hideTooltip?: bool, id?: number
| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'bottom'
| 'none'
| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, stroke?: string, sx?: Array<func
| object
| bool>
| func
| object, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelMinGap?: number, 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<{ axis?: 'y', barGapRatio?: number, categoryGapRatio?: number, 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'band', 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, width?: number }
| { axis?: 'y', 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'point', 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, width?: number }
| { axis?: 'y', classes?: object, colorMap?: { 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'log', 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, width?: number }
| { axis?: 'y', classes?: object, colorMap?: { 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'pow', 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, width?: number }
| { axis?: 'y', classes?: object, colorMap?: { 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'sqrt', 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, width?: number }
| { axis?: 'y', classes?: object, colorMap?: { 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'time', 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, width?: number }
| { axis?: 'y', classes?: object, colorMap?: { 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: '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, width?: number }
| { axis?: 'y', classes?: object, colorMap?: { 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, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: Date
| number, min?: Date
| number, offset?: number, position?: 'left'
| 'none'
| 'right', reverse?: bool, scaleType?: 'linear', 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, width?: number }>		-

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

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

The ref is forwarded to the root element.

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.