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'
Override or extend the styles applied to the component.
Type:Partial<ChartsAxisClasses>
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 })
The maximal value of the domain.
If not provided, it gets computed to display the entire chart data.
Type:number | Date
The minimal value of the domain.
If not provided, it gets computed to display the entire chart data.
Type:number | Date
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
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'
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'
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'
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'
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
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
The number of ticks. This number is not guaranteed.
Not supported by categorical axis (band, points).
Type:number
The placement of ticks in regard to the band interval.
Only used if scale is 'band'.
Type:'start' | 'end' | 'middle' | 'extremities'
Default:'extremities'
Formats the axis value.
Type:<TScaleName extends S>(value: V, context: AxisValueFormatterContext<TScaleName>) => string