ScatterChart API

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

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

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

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

Props

Props of the native component are also available.

Name	Type	Default	Description
series*	Array<object>	-	The series to display in the scatter chart. An array of ScatterSeries objects.
axesGap	number	0	A gap added between axes when multiple axes are rendered on the same side of the chart.
axisHighlight	{ x?: 'band' \| 'line' \| 'none', y?: 'band' \| 'line' \| 'none' }	{ x: 'none', y: 'none' }	The configuration of axes highlight. See highlighting docs for more details.
brushConfig	{ enabled?: bool, preventHighlight?: bool, preventTooltip?: bool }	-	Configuration for the brush interaction.
colors	Array<string> \| func	rainbowSurgePalette	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 `dataKey` property.
disableAxisListener	bool	false	If `true`, the charts will not listen to the mouse move event. It might break interactive features, but will improve performance.
disableVoronoi	bool	false	If true, the interaction will not use the Voronoi cell and fall back to hover events.
grid	{ horizontal?: bool, vertical?: bool }	-	Option to display a cartesian grid in the background.
height	number	-	The height of the chart in px. If not defined, it takes the height of the parent element.
hiddenItems	Array<{ dataIndex?: number, seriesId: string, type?: 'scatter' }>	-	List of hidden series and/or items. Different chart types use different keys.
hideLegend	bool	-	If `true`, the legend is not rendered.
highlightedItem	{ dataIndex?: number, seriesId: string, type?: 'scatter' }	-	The highlighted item. Used when the highlight is controlled.
id	string	-	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.
initialHiddenItems	Array<{ dataIndex?: number, seriesId: string, type?: 'scatter' }>	-	List of initially hidden series and/or items. Used for uncontrolled state. Different chart types use different keys.
loading	bool	false	If `true`, a loading overlay is displayed.
localeText	object	-	Localized text for chart components.
margin	number \| { 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`.
onAxisClick	func	-	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 \| ChartsAxisData) => void` `event` The mouse event recorded on the `<svg/>` element. `data` The data about the clicked axis and items associated with it.
onHiddenItemsChange	func	-	Callback fired when any hidden identifiers change. Signature:`function(hiddenItems: Array<VisibilityIdentifier>) => void` `hiddenItems` The new list of hidden identifiers.
onHighlightChange	func	-	The callback fired when the highlighted item changes. Signature:`function(highlightedItem: HighlightItemIdentifier<SeriesType> \| null) => void` `highlightedItem` The newly highlighted item.
onItemClick	func	-	Callback fired when clicking on a scatter item. Signature:`function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void` `event` The mouse event recorded on the `<svg/>` element if using Voronoi cells. Or the Mouse event from the scatter element, when `disableVoronoi=true`. `scatterItemIdentifier` The scatter item identifier.
onTooltipAxisChange	func	-	The function called when the pointer position corresponds to a new axis data item. This update can either be caused by a pointer movement, or an axis update. In case of multiple axes, the function is called if at least one axis is updated. The argument contains the identifier for all axes with a `data` property. Signature:`function(axisItems: Array<AxisItemIdentifier>) => void` `axisItems` The array of axes item identifiers.
onTooltipItemChange	func	-	The callback fired when the tooltip item changes. Signature:`function(tooltipItem: SeriesItemIdentifier<TSeries> \| null) => void` `tooltipItem` The newly highlighted item.
renderer	'svg-batch' \| 'svg-single'	'svg-single'	The type of renderer to use for the scatter plot. - `svg-single`: Renders every scatter item in a `<circle />` element. - `svg-batch`: Batch renders scatter items in `<path />` elements for better performance with large datasets, at the cost of some limitations. Read more: https://mui.com/x/react-charts/scatter/#performance
showToolbar	bool	false	If true, shows the default chart toolbar.
skipAnimation	bool	-	If `true`, animations are skipped. If unset or `false`, the animations respects the user's `prefers-reduced-motion` setting.
slotProps	object	{}	The props used for each component slot.
slots	object	{}	Overridable component slots. See Slots API below for more details.
tooltipAxis	Array<{ axisId: number \| string, dataIndex: number }>	-	The controlled axis tooltip. Identified by the axis id, and data index.
tooltipItem	{ dataIndex: number, seriesId: string, type?: 'scatter' }	-	The tooltip item. Used when the tooltip is controlled.
voronoiMaxRadius	'item' \| number	-	Defines the maximum distance between a scatter point and the pointer that triggers the interaction. If set to `'item'`, the radius is the `markerSize`. If `undefined`, the radius is assumed to be infinite.
width	number	-	The width of the chart in px. If not defined, it takes the width of the parent element.
xAxis	Array<{ 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, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, 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, tickSpacing?: 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, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, 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, tickSpacing?: 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, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, 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, tickSpacing?: 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' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, 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, tickSpacing?: 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, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, 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, tickSpacing?: 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, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, 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, tickSpacing?: 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, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, 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, tickSpacing?: 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, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, 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, tickSpacing?: 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, height?: number, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'bottom' \| 'none' \| 'top', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, 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, tickSpacing?: number, valueFormatter?: func }>	-	The configuration of the x-axes. If not provided, a default axis config is used. An array of AxisConfig objects.
yAxis	Array<{ 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, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'band', slotProps?: object, slots?: object, 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, tickSpacing?: 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, groups?: Array<{ getValue: func, tickLabelStyle?: object, tickSize?: number }>, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, offset?: number, ordinalTimeTicks?: Array<'biweekly' \| 'days' \| 'hours' \| 'months' \| 'quarterly' \| 'weeks' \| 'years' \| { format: func, getTickNumber: func, isTick: func }>, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'point', slotProps?: object, slots?: object, 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, tickSpacing?: 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, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'log', slotProps?: object, slots?: object, 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, tickSpacing?: 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' }, constant?: number, data?: array, dataKey?: string, disableLine?: bool, disableTicks?: bool, domainLimit?: 'nice' \| 'strict' \| func, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'symlog', slotProps?: object, slots?: object, 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, tickSpacing?: 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, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'pow', slotProps?: object, slots?: object, 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, tickSpacing?: 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, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'sqrt', slotProps?: object, slots?: object, 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, tickSpacing?: 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, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'time', slotProps?: object, slots?: object, 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, tickSpacing?: 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, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number \| { valueOf: func }, min?: number \| { valueOf: func }, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'utc', slotProps?: object, slots?: object, 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, tickSpacing?: 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, hideTooltip?: bool, id?: number \| string, ignoreTooltip?: bool, label?: string, labelStyle?: object, max?: number, min?: number, offset?: number, position?: 'left' \| 'none' \| 'right', reverse?: bool, scaleType?: 'linear', slotProps?: object, slots?: object, 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, tickSpacing?: 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.
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.

The ref is forwarded to the root element.

Slots

Slot name	Default component	Description
axisLabel	`ChartsText`	Custom component for axis label.
axisLine	`'line'`	Custom component for the axis main line.
axisTick	`'line'`	Custom component for the axis tick.
axisTickLabel	`ChartsText`	Custom component for tick label.
baseButton
baseIconButton
legend	`ChartsLegend`	Custom rendering of the legend.
loadingOverlay	`ChartsLoadingOverlay`	Overlay component rendered when the chart is in a loading state.
marker	`ScatterMarker`	The component that renders the marker for a scatter point.
noDataOverlay	`ChartsNoDataOverlay`	Overlay component rendered when the chart has no data to display.
scatter
toolbar	`ChartsToolbar`	Custom component for the toolbar.
tooltip	`ChartsTooltipRoot`	Custom component for the tooltip popper.
xAxis	`ChartsXAxis`	Custom component for the x-axis.
yAxis	`ChartsYAxis`	Custom component for the y-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.