Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

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';
    You can learn about the difference by reading this guide on minimizing bundle size.

    Component name

    The name MuiScatterChart can be used when providing default props or style overrides in the theme.

    Props

    NameTypeDefaultDescription
    bottomAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
    | 'top', stroke?: string, tickFontSize?: number, tickSize?: number }
    | 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 ChartsXAxisProps.
    colorsArray<string>
    | func
    Color palette used to colorize multiple series.
    leftAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
    | 'right', stroke?: string, tickFontSize?: number, tickSize?: number }
    | 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 ChartsYAxisProps.
    rightAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left'
    | 'right', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		null
    Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object ChartsYAxisProps.
    topAxis{ axisId: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom'
    | 'top', stroke?: string, tickFontSize?: number, tickSize?: number }
    | string    		null
    Indicate which axis to display the top of the charts. Can be a string (the id of the axis) or an object ChartsXAxisProps.

    The component cannot hold a ref.