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

XAxis API

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

    Component name

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

    Props

    NameTypeDefaultDescription
    axisId*string
    Id of the axis to render.
    classesobject
    Override or extend the styles applied to the component. See CSS API below for more details.
    disableLineboolfalse
    If true, the axis line is disabled.
    disableTicksboolfalse
    If true, the ticks are disabled.
    fillstring'currentColor'
    The fill color of the axis text.
    labelstring
    The label of the axis.
    labelFontSizenumber14
    The font size of the axis label.
    position'bottom'
    | 'top'
    Position of the axis.
    strokestring'currentColor'
    The stroke color of the axis line.
    tickFontSizenumber12
    The font size of the axis ticks text.
    tickSizenumber6
    The size of the ticks.

    The component cannot hold a ref.

    CSS

    Rule nameGlobal classDescription
    root.MuiXAxis-rootStyles applied to the root element.
    line.MuiXAxis-lineStyles applied to the main line element.
    tickContainer.MuiXAxis-tickContainerStyles applied to group ingruding the tick and its label.
    tick.MuiXAxis-tickStyles applied to ticks.
    tickLabel.MuiXAxis-tickLabelStyles applied to ticks label.
    label.MuiXAxis-labelStyles applied to the axis label.
    directionX.MuiXAxis-directionXStyles applied to x axes.
    directionY.MuiXAxis-directionYStyles applied to y axes.
    top.MuiXAxis-topStyles applied to the top axis.
    bottom.MuiXAxis-bottomStyles applied to the bottom axis.
    left.MuiXAxis-leftStyles applied to the left axis.
    right.MuiXAxis-rightStyles applied to the right axis.

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