Skip to content

ChartsGrid API

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

Component demos

Import

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

Props

NameTypeDefaultDescription
classesobject-

Override or extend the styles applied to the component.

See CSS API below for more details.

horizontalbool-

Displays horizontal grid.

verticalbool-

Displays vertical grid.

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
.MuiChartsGrid-horizontalLinehorizontalLineStyles applied to x-axes.
.MuiChartsGrid-linelineStyles applied to every line element.
.MuiChartsGrid-rootrootStyles applied to the root element.
.MuiChartsGrid-verticalLineverticalLineStyles applied to y-axes.

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