Skip to content
Edit this page

ChartsAxis API

API reference docs for the React ChartsAxis 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 { ChartsAxis } from '@mui/x-charts/ChartsAxis';
// or
import { ChartsAxis } from '@mui/x-charts';
    Learn about the difference by reading this guide on minimizing bundle size.

    Props

    bottomAxis

    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: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom' | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    xAxisIds[0] The id of the first provided axis
    leftAxis

    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: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left' | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    yAxisIds[0] The id of the first provided axis
    rightAxis

    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: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'left' | 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    null
    slotProps

    The props used for each component slot.

    Type:

    object

    Default:

    {}
    slots

    Overridable component slots.

    Type:

    object

    Default:

    {}
    topAxis

    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: string, classes?: object, disableLine?: bool, disableTicks?: bool, fill?: string, label?: string, labelFontSize?: number, position?: 'bottom' | 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number } | string

    Default:

    null
    The component cannot hold a ref.

    CSS

    The following class names are useful for styling with CSS (the state classes are marked).
    To learn more, visit the component customization page.


    .MuiChartsAxis-rootroot

    Styles applied to the root element.

    .MuiChartsAxis-lineline

    Styles applied to the main line element.

    .MuiChartsAxis-tickContainertickContainer

    Styles applied to group ingruding the tick and its label.

    .MuiChartsAxis-ticktick

    Styles applied to ticks.

    .MuiChartsAxis-tickLabeltickLabel

    Styles applied to ticks label.

    .MuiChartsAxis-labellabel

    Styles applied to the axis label.

    .MuiChartsAxis-directionXdirectionX

    Styles applied to x axes.

    .MuiChartsAxis-directionYdirectionY

    Styles applied to y axes.

    .MuiChartsAxis-toptop

    Styles applied to the top axis.

    .MuiChartsAxis-bottombottom

    Styles applied to the bottom axis.

    .MuiChartsAxis-leftleft

    Styles applied to the left axis.

    .MuiChartsAxis-rightright

    Styles applied to the right axis.

    You can override the style of the component using one of these customization options: