Skip to content

DefaultChartsItemTooltipContent API

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

Demos

Import

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

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

Props

NameTypeDescription
classes*object

Override or extend the styles applied to the component.

See CSS classes API below for more details.

getColor*func

Get the color of the item with index dataIndex.

Signature:function(dataIndex: number) => string
  • dataIndex The data index of the item.

Returns: The color to display.

itemData*{ dataIndex?: number, seriesId: number
| string, type: 'bar'
| 'line'
| 'pie'
| 'scatter' }

The data used to identify the triggered item.

series*object

The series linked to the triggered axis.

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

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