ScatterChart API
API reference docs for the React ScatterChart component. Learn about the props, CSS, and other APIs of this exported module.
Component demos
Import
import { ScatterChart } from '@mui/x-charts/ScatterChart';
// or
import { ScatterChart } from '@mui/x-charts';Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps.
Type:{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', 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 }
| string
Default:xAxisIds[0] The id of the first provided axis
Color palette used to colorize multiple series.
Type:Array<string>
| func
Default:blueberryTwilightPalette
An array of objects that can be used to populate series and axes data using their dataKey property.
Type:Array<object>
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
The height of the chart in px. If not defined, it takes the height of the parent element.
Type:number
Default:undefined
Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps.
Type:{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', 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 }
| string
Default:yAxisIds[0] The id of the first provided axis
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.
Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps.
Type:{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'left'
| 'right', 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 }
| string
Default:null
Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps.
Type:{ axisId?: number
| string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, labelStyle?: object, position?: 'bottom'
| 'top', 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 }
| string
Default:null
The width of the chart in px. If not defined, it takes the width of the parent element.
Type:number
Default:undefined
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 }>
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 }>