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 '/packages/x-charts/src/ChartsAxis';
// or
import { ChartsAxis } from '/packages/x-charts/src';
    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.