Skip to content
Influence MUI X's 2024 roadmap! Participate in the latest Developer Survey

ChartsAxis API

API reference docs for the React ChartsAxis component. Learn about the props, CSS, and other APIs of this exported module.

Component demos

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, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, 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, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, 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, labelStyle?: object, position?: 'left'
| 'right', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, 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.

See Slots API below for more details.

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, labelStyle?: object, position?: 'bottom'
| 'top', slotProps?: object, slots?: object, stroke?: string, tickFontSize?: number, tickInterval?: 'auto'
| array
| func, tickLabelInterval?: 'auto'
| func, tickLabelStyle?: object, tickMaxStep?: number, tickMinStep?: number, tickNumber?: number, tickSize?: number }
| string

Default:null

The component cannot hold a ref.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

.MuiChartsAxis-bottom

Styles applied to the bottom axis.

Rule name:bottom

.MuiChartsAxis-directionX

Styles applied to x-axes.

Rule name:directionX

.MuiChartsAxis-directionY

Styles applied to y-axes.

Rule name:directionY

.MuiChartsAxis-label

Styles applied to the group containing the axis label.

Rule name:label

.MuiChartsAxis-left

Styles applied to the left axis.

Rule name:left

.MuiChartsAxis-line

Styles applied to the main line element.

Rule name:line

.MuiChartsAxis-right

Styles applied to the right axis.

Rule name:right

.MuiChartsAxis-root

Styles applied to the root element.

Rule name:root

.MuiChartsAxis-tick

Styles applied to ticks.

Rule name:tick

.MuiChartsAxis-tickContainer

Styles applied to group ingruding the tick and its label.

Rule name:tickContainer

.MuiChartsAxis-tickLabel

Styles applied to ticks label.

Rule name:tickLabel

.MuiChartsAxis-top

Styles applied to the top axis.

Rule name:top


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