Skip to content

AxisConfig API

Extended documentation for the AxisConfig interface with detailed information on the module's properties and available APIs.

Demos

Import

import { AxisConfig } from '@mui/x-charts-pro'
// or
import { AxisConfig } from '@mui/x-charts'

Properties

Id used to identify the axis.

Type:AxisId


Type:'band'


Optional

Override or extend the styles applied to the component.

Type:Partial<ChartsAxisClasses>


Optional

Type:OrdinalColorConfig | ContinuousColorConfig | PiecewiseColorConfig


Optional

The data used by 'band' and 'point' scales.

Type:readonly V[]


Optional

The key used to retrieve data from the dataset prop.

Type:string


Optional

If true, the axis line is disabled.

Type:boolean

Default:false


Optional

If true, the ticks are disabled.

Type:boolean

Default:false


Optional

Defines the axis scale domain based on the min/max values of series linked to it.
- 'nice': Rounds the domain at human friendly values.
- 'strict': Set the domain to the min/max value provided. No extra space is added.
- function: Receives the calculated extremums as parameters, and should return the axis domain.

Type:'nice' | 'strict' | ((min: number, max: number) => { min: number; max: number })


Optional

The fill color of the axis text.

Type:string

Default:'currentColor'


Optional

The height of the axis.

Type:number

Default:30


Optional

If true, hide this value in the tooltip

Type:boolean


Optional

The label of the axis.

Type:string


Optional

The style applied to the axis label.

Type:ChartsTextProps['style']


Optional

The maximal value of the domain.
If not provided, it gets computed to display the entire chart data.

Type:number | Date


Optional

The minimal value of the domain.
If not provided, it gets computed to display the entire chart data.

Type:number | Date


Optional

The offset of the axis in pixels. It can be used to move the axis from its default position.
X-axis: A top axis will move up, and a bottom axis will move down.
Y-axis: A left axis will move left, and a right axis will move right.

Type:number

Default:0


Optional

Position of the axis.

When set, the space for the axis is reserved, even if the axis is not displayed due to missing data.

Set to 'none' to hide the axis.

The first axis in the list will always have a default position.

Type:'top' | 'bottom' | 'none'


Optional

If true, Reverse the axis scaleBand.

Type:boolean


Optional

The props used for each component slot.

Type:Partial<ChartsAxisSlotProps>

Default:{}


Optional

Overridable component slots.

Type:Partial<ChartsAxisSlots>

Default:{}


Optional

The stroke color of the axis line.

Type:string

Default:'currentColor'


Optional

Type:SxProps


Optional

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) =&gt; boolean which is available only if the axis has "point" scale.
- an array containing the values where ticks should be displayed.

Type:'auto' | ((value: any, index: number) => boolean) | any[]

Default:'auto'


Optional

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' | ((value: any, index: number) => boolean)

Default:'auto'


Optional

The placement of ticks label. Can be the middle of the band, or the tick position.
Only used if scale is 'band'.

Type:'middle' | 'tick'

Default:'middle'


Optional

The style applied to ticks text.

Type:ChartsTextProps['style']


Optional

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


Optional

Minimal 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


Optional

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

Type:number


Optional

The placement of ticks in regard to the band interval.
Only used if scale is 'band'.

Type:'start' | 'end' | 'middle' | 'extremities'

Default:'extremities'


Optional

The size of the ticks.

Type:number

Default:6


Optional

Formats the axis value.

Type:<TScaleName extends S>(value: V, context: AxisValueFormatterContext<TScaleName>) => string


Optional

Type:boolean | ZoomOptions