Skip to content

ChartsXAxis API

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

Component demos

Import

import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
// or
import { ChartsXAxis } from '@mui/x-charts';
Learn about the difference by reading this guide on minimizing bundle size.

Props

axisIdRequired

Id of the axis to render.

Type:string

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

disableLine

If true, the axis line is disabled.

Type:bool

disableTicks

If true, the ticks are disabled.

Type:bool

fill

The fill color of the axis text.

Type:string

Default:'currentColor'

label

The label of the axis.

Type:string

labelFontSize

The font size of the axis label.

Type:number

Default:14

labelStyle

The style applied to the axis label.

Type:object

position

Position of the axis.

Type:'bottom'
| 'top'

slotProps

The props used for each component slot.

Type:object

Default:{}

slots

Overridable component slots.

Type:object

Default:{}

stroke

The stroke color of the axis line.

Type:string

Default:'currentColor'

tickFontSize

The font size of the axis ticks text.

Type:number

Default:12

tickInterval

Defines which ticks are displayed. Its value can be: - 'auto' In such case the ticks are computed based on axis scale and other parameters. - a filtering function of the form (value, index) => boolean which is available only if the axis has a data property. - an array containing the values where ticks should be displayed.

Type:'auto'
| array
| func

Default:'auto'

tickLabelInterval

Defines which ticks get its label displayed. Its value can be: - 'auto' In such case, labels are displayed if they do not overlap with the previous one. - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.

Type:'auto'
| func

Default:'auto'

tickLabelStyle

The style applied to ticks text.

Type:object

tickMaxStep

Maximal step between two ticks. When using time data, the value is assumed to be in ms. Not supported by categorical axis (band, points).

Type:number

tickMinStep

Maximal step between two ticks. When using time data, the value is assumed to be in ms. Not supported by categorical axis (band, points).

Type:number

tickNumber

The number of ticks. This number is not guaranted. Not supported by categorical axis (band, points).

Type:number

tickSize

The size of the ticks.

Type:number

Default:6

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.

.MuiChartsXAxis-root

Styles applied to the root element.

Rule name:root

.MuiChartsXAxis-line

Styles applied to the main line element.

Rule name:line

.MuiChartsXAxis-tickContainer

Styles applied to group ingruding the tick and its label.

Rule name:tickContainer

.MuiChartsXAxis-tick

Styles applied to ticks.

Rule name:tick

.MuiChartsXAxis-tickLabel

Styles applied to ticks label.

Rule name:tickLabel

.MuiChartsXAxis-label

Styles applied to the group containing the axis label.

Rule name:label

.MuiChartsXAxis-directionX

Styles applied to x axes.

Rule name:directionX

.MuiChartsXAxis-directionY

Styles applied to y axes.

Rule name:directionY

.MuiChartsXAxis-top

Styles applied to the top axis.

Rule name:top

.MuiChartsXAxis-bottom

Styles applied to the bottom axis.

Rule name:bottom

.MuiChartsXAxis-left

Styles applied to the left axis.

Rule name:left

.MuiChartsXAxis-right

Styles applied to the right axis.

Rule name:right


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

Slots

axisLabel
axisLine
axisTick
axisTickLabel