Skip to content
Influence MUI X's 2024 roadmap! Participate in the latest Developer Survey

ChartsReferenceLine API

API reference docs for the React ChartsReferenceLine component. Learn about the props, CSS, and other APIs of this exported module.

Component demos

Import

import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
// or
import { ChartsReferenceLine } from '@mui/x-charts';
Learn about the difference by reading this guide on minimizing bundle size.

Props

axisId

The id of the axis used for the reference value.

Type:number
| string

Default:The `id` of the first defined axis.

classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:object

label

The label to display along the reference line.

Type:string

labelAlign

The alignment if the label is in the chart drawing area.

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

Default:'middle'

labelStyle

The style applied to the label.

Type:object

lineStyle

The style applied to the line.

Type:object

spacing

Additional space arround the label in px. Can be a number or an object { x, y } to distinguish space with the reference line and space with axes.

Type:number
| { x?: number, y?: number }

Default:5

x

The x value associated with the reference line. If defined the reference line will be vertical.

Type:Date
| number
| string

y

The y value associated with the reference line. If defined the reference line will be horizontal.

Type:Date
| number
| string

The component cannot hold a ref.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

.MuiChartsReferenceLine-horizontal

Styles applied to the root element if the reference line is horizontal.

Rule name:horizontal

.MuiChartsReferenceLine-label

Styles applied to the reference label.

Rule name:label

.MuiChartsReferenceLine-line

Styles applied to the reference line.

Rule name:line

.MuiChartsReferenceLine-root

Styles applied to the root element.

Rule name:root

.MuiChartsReferenceLine-vertical

Styles applied to the root element if the reference line is vertical.

Rule name:vertical


You can override the style of the component using one of these customization options: