Skip to content

AxisConfig API

Demos

Import

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

Properties

id

Id used to identify the axis.

Type:AxisId

scaleType

Type:'linear'

axisIdOptional

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

Type:AxisId

classesOptional

Override or extend the styles applied to the component.

Type:Partial<ChartsAxisClasses>

colorMapOptional

Type:ContinuousColorConfig | PiecewiseColorConfig

dataOptional

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

Type:V[]

dataKeyOptional

The key used to retrieve data from the dataset prop.

Type:string

disableLineOptional

If true, the axis line is disabled.

Type:boolean

Default:false

disableTicksOptional

If true, the ticks are disabled.

Type:boolean

Default:false

fillOptional

The fill color of the axis text.

Type:string

Default:'currentColor'

hideTooltipOptional

If true, hide this value in the tooltip

Type:boolean

labelOptional

The label of the axis.

Type:string

labelFontSizeOptional

The font size of the axis label.

Type:number

Default:14

labelStyleOptional

The style applied to the axis label.

Type:ChartsTextProps['style']

maxOptional

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

Type:number | Date

minOptional

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

Type:number | Date

positionOptional

Position of the axis.

Type:'top' | 'bottom'

reverseOptional

If true, Reverse the axis scaleBand.

Type:boolean

slotPropsOptional

The props used for each component slot.

Type:Partial<ChartsAxisSlotProps>

Default:{}

slotsOptional

Overridable component slots.

Type:Partial<ChartsAxisSlots>

Default:{}

strokeOptional

The stroke color of the axis line.

Type:string

Default:'currentColor'

tickFontSizeOptional

The font size of the axis ticks text.

Type:number

Default:12

tickIntervalOptional

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 a data property.
- an array containing the values where ticks should be displayed.

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

Default:'auto'

tickLabelIntervalOptional

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'

tickLabelPlacementOptional

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'

tickLabelStyleOptional

The style applied to ticks text.

Type:ChartsTextProps['style']

tickMaxStepOptional

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

tickMinStepOptional

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

tickNumberOptional

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

Type:number

tickPlacementOptional

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

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

Default:'extremities'

tickSizeOptional

The size of the ticks.

Type:number

Default:6

valueFormatterOptional

Formats the axis value.

Type:(value: V, context: AxisValueFormatterContext) => string