Skip to content

ChartsYAxis API

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

Component demos

Import

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

Props

axisId

The id of the axis to render. If undefined, it will be the first defined axis.

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

Default:false

disableTicks

If true, the ticks are disabled.

Type:bool

Default:false

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:'left'
| 'right'

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.

.MuiChartsYAxis-root

Styles applied to the root element.

Rule name:root

.MuiChartsYAxis-line

Styles applied to the main line element.

Rule name:line

.MuiChartsYAxis-tickContainer

Styles applied to group ingruding the tick and its label.

Rule name:tickContainer

.MuiChartsYAxis-tick

Styles applied to ticks.

Rule name:tick

.MuiChartsYAxis-tickLabel

Styles applied to ticks label.

Rule name:tickLabel

.MuiChartsYAxis-label

Styles applied to the group containing the axis label.

Rule name:label

.MuiChartsYAxis-directionX

Styles applied to x-axes.

Rule name:directionX

.MuiChartsYAxis-directionY

Styles applied to y-axes.

Rule name:directionY

.MuiChartsYAxis-top

Styles applied to the top axis.

Rule name:top

.MuiChartsYAxis-bottom

Styles applied to the bottom axis.

Rule name:bottom

.MuiChartsYAxis-left

Styles applied to the left axis.

Rule name:left

.MuiChartsYAxis-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