Skip to content

DefaultChartsAxisTooltipContent API

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

Demos

Import

import { DefaultChartsAxisTooltipContent } from '@mui/x-charts/ChartsTooltip';
// or
import { DefaultChartsAxisTooltipContent } from '@mui/x-charts';

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

Props

NameTypeDescription
axis*object

The properties of the triggered axis.

axisData*{ x?: { index?: number, value: Date
| number
| string }, y?: { index?: number, value: Date
| number
| string } }

Data identifying the triggered axis.

classes*object

Override or extend the styles applied to the component.

See CSS classes API below for more details.

series*Array<object>

The series linked to the triggered axis.

axisValueDate
| number
| string

The value associated to the current mouse position.

dataIndexnumber

The index of the data item triggered.

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
.MuiDefaultChartsAxisTooltipContent-cellcellStyles applied to the cell element.
.MuiDefaultChartsAxisTooltipContent-labelCelllabelCellStyles applied to the labelCell element.
.MuiDefaultChartsAxisTooltipContent-markmarkStyles applied to the mark element.
.MuiDefaultChartsAxisTooltipContent-markCellmarkCellStyles applied to the markCell element.
.MuiDefaultChartsAxisTooltipContent-rootrootStyles applied to the root element.
.MuiDefaultChartsAxisTooltipContent-rowrowStyles applied to the row element.
.MuiDefaultChartsAxisTooltipContent-tabletableStyles applied to the table element.
.MuiDefaultChartsAxisTooltipContent-valueCellvalueCellStyles applied to the valueCell element.

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