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:'band'

colorMapOptional

Type:OrdinalColorConfig | 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

hideTooltipOptional

If true, hide this value in the tooltip

Type:boolean

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

reverseOptional

If true, Reverse the axis scaleBand.

Type:boolean

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) => 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'

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'

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'

valueFormatterOptional

Formats the axis value.

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