Skip to content

ScatterSeries API

Extended documentation for the ScatterSeries interface with detailed information on the module's properties and available APIs.

Demos

Import

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

Properties

Type:'scatter'


Optional

Color to use when displaying the series. If `colorGetter` is provided, it will be used to get the color for each data point instead. Otherwise, this color will be used for all data points in the series.

Type:string


Optional

A function that returns a color based on the value and/or the data index of a point. The returned color is used when displaying the specific data point, e.g., a marker in a line chart. When the color of the entire series is required, e.g., in legends, the `color` property is used instead.

Type:(data: { value: { x: number, y: number, z?: any, id?: number | string }, dataIndex: number }) => string


Optional

Type:readonly ScatterValueType[]


Optional

The keys used to retrieve data from the dataset. When this prop is provided, all of `x`, `y`, and `id` must be provided. While `z` is optional.

Type:{ x: string, y: string, z?: string, id?: string }


Optional

The scope to apply when the series is highlighted.

Type:{ highlight?: 'item' | 'none' | 'series', fade?: 'global' | 'none' | 'series' }


Optional

The id of this series.

Type:string


Optional

The label to display on the tooltip or the legend. It can be a string or a function.

Type:(location: 'legend' | 'tooltip') => string | string


Optional

Defines the mark type for the series. There is a default mark type for each series type.

Type:'circle' | 'line' | 'line+mark' | 'square' | ComponentClass<ChartsLabelCustomMarkProps, any> | FunctionComponent<ChartsLabelCustomMarkProps>


Optional

Size of the markers in the scatter plot, in pixels.

Type:number


Optional

Type:{ markerSize?: number }


Optional

Formatter used to render values in tooltip or other data display.

Type:(value: { x: number, y: number, z?: any, id?: number | string }, context: { dataIndex: number }) => string


Optional

A function to extract and transform the value from the `dataset` item. It receives the full dataset item and should return a scatter value. Can be used as an alternative to `datasetKeys`.

Type:(item: DatasetElementType<unknown>) => { x: number, y: number, z?: any, id?: number | string }


Optional

The id of the x-axis used to render the series.

Type:number | string


Optional

The id of the y-axis used to render the series.

Type:number | string


Optional

The id of the z-axis used to render the series.

Type:string