ChartsXAxis API
API reference docs for the React ChartsXAxis component. Learn about the props, CSS, and other APIs of this exported module.
Demos
Import
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
// or
import { ChartsXAxis } from '@mui/x-charts';
// or
import { ChartsXAxis } from '@mui/x-charts-pro';
Learn about the difference by reading this guide on minimizing bundle size.
Name | Type | Default | Description |
---|---|---|---|
axisId | number | string | - | The id of the axis to render. If undefined, it will be the first defined axis. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
disableLine | bool | false | If true, the axis line is disabled. |
disableTicks | bool | false | If true, the ticks are disabled. |
fill | string | 'currentColor' | The fill color of the axis text. |
label | string | - | The label of the axis. |
labelStyle | object | - | The style applied to the axis label. |
position | 'bottom' | 'top' | - | Position of the axis. |
slotProps | object | {} | The props used for each component slot. |
slots | object | {} | Overridable component slots. See Slots API below for more details. |
stroke | string | 'currentColor' | The stroke color of the axis line. |
tickInterval | 'auto' | array | func | 'auto' | 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 |
tickLabelInterval | 'auto' | func | '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. |
tickLabelPlacement | 'middle' | 'tick' | 'middle' | The placement of ticks label. Can be the middle of the band, or the tick position. Only used if scale is 'band'. |
tickLabelStyle | object | - | The style applied to ticks text. |
tickMaxStep | number | - | Maximal step between two ticks. When using time data, the value is assumed to be in ms. Not supported by categorical axis (band, points). |
tickMinStep | 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). |
tickNumber | number | - | The number of ticks. This number is not guaranteed. Not supported by categorical axis (band, points). |
tickPlacement | 'end' | 'extremities' | 'middle' | 'start' | 'extremities' | The placement of ticks in regard to the band interval. Only used if scale is 'band'. |
tickSize | number | 6 | The size of the ticks. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Class name | Rule name | Description |
---|---|---|
.MuiChartsXAxis-bottom | bottom | Styles applied to the bottom axis. |
.MuiChartsXAxis-directionX | directionX | Styles applied to x-axes. |
.MuiChartsXAxis-directionY | directionY | Styles applied to y-axes. |
.MuiChartsXAxis-label | label | Styles applied to the group containing the axis label. |
.MuiChartsXAxis-left | left | Styles applied to the left axis. |
.MuiChartsXAxis-line | line | Styles applied to the main line element. |
.MuiChartsXAxis-right | right | Styles applied to the right axis. |
.MuiChartsXAxis-root | root | Styles applied to the root element. |
.MuiChartsXAxis-tick | tick | Styles applied to ticks. |
.MuiChartsXAxis-tickContainer | tickContainer | Styles applied to group including the tick and its label. |
.MuiChartsXAxis-tickLabel | tickLabel | Styles applied to ticks label. |
.MuiChartsXAxis-top | top | Styles applied to the top axis. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverrides
property in a custom theme.
Source code
If you did not find the information in this page, consider having a look at the implementation of the component for more detail.