ScatterChartPro API
API reference docs for the React ScatterChartPro component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { ScatterChartPro } from '@mui/x-charts-pro/ScatterChartPro';
// or
import { ScatterChartPro } from '@mui/x-charts-pro';
Learn about the difference by reading this guide on minimizing bundle size.
Name | Type | Default | Description |
---|---|---|---|
series* | Array<object> | - | The series to display in the scatter chart. An array of ScatterSeriesType objects. |
axisHighlight | { x?: 'band' | 'line' | 'none', y?: 'band' | 'line' | 'none' } | { x: 'none', y: 'none' } | The configuration of axes highlight. See highlighting docs for more details. |
bottomAxis | object | string | xAxisIds[0] The id of the first provided axis | Indicate which axis to display the bottom of the charts. Can be a string (the id of the axis) or an object |
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 |
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. |
hideLegend | bool | - | If |
highlightedItem | { dataIndex?: number, seriesId?: number | string } | - | The item currently highlighted. Turns highlighting into a controlled prop. |
leftAxis | object | string | yAxisIds[0] The id of the first provided axis | Indicate which axis to display the left of the charts. Can be a string (the id of the axis) or an object |
loading | bool | false | If |
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
|
onItemClick | func | - | Callback fired when clicking on a scatter item. Signature: function(event: MouseEvent, scatterItemIdentifier: ScatterItemIdentifier) => void
|
onZoomChange | func | - | Callback fired when the zoom has changed. Signature: function(zoomData: Array
|
rightAxis | object | string | null | Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object |
skipAnimation | bool | - | If |
slotProps | object | {} | The props used for each component slot. |
slots | object | {} | Overridable component slots. See Slots API below for more details. |
topAxis | object | string | null | Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object |
voronoiMaxRadius | number | - | Defines the maximal distance between a scatter point and the pointer that triggers the interaction. 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.