Skip to content
Skip to content

ChartsReferenceLine API

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

Demos

Import

import { ChartsReferenceLine } from '@mui/x-charts/ChartsReferenceLine';
// or
import { ChartsReferenceLine } from '@mui/x-charts';
// or
import { ChartsReferenceLine } from '@mui/x-charts-pro';

Learn about the difference by reading this guide on minimizing bundle size.

Props

NameTypeDefaultDescription
axisIdnumber
| string
The `id` of the first defined axis.

The id of the axis used for the reference value.

classesobject-

Override or extend the styles applied to the component.

See CSS classes API below for more details.

labelstring-

The label to display along the reference line.

labelAlign'end'
| 'middle'
| 'start'
'middle'

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

labelStyleobject-

The style applied to the label.

lineStyleobject-

The style applied to the line.

spacingnumber
| { x?: number, y?: number }
5

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

xDate
| number
| string
-

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

yDate
| number
| string
-

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

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.

Class nameRule nameDescription
.MuiChartsReferenceLine-horizontalhorizontalStyles applied to the root element if the reference line is horizontal.
.MuiChartsReferenceLine-labellabelStyles applied to the reference label.
.MuiChartsReferenceLine-linelineStyles applied to the reference line.
.MuiChartsReferenceLine-rootrootStyles applied to the root element.
.MuiChartsReferenceLine-verticalverticalStyles applied to the root element if the reference line is vertical.

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

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.