Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

ChartsTooltip API

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

Demos

For examples and details on the usage of this React component, visit the component demo pages:

    Import

    import { ChartsTooltip } from '@mui/x-charts';
    You can learn about the difference by reading this guide on minimizing bundle size.

    Component name

    The name MuiChartsTooltip can be used when providing default props or style overrides in the theme.

    Props

    NameTypeDefaultDescription
    axisContentelementType
    Component to override the tooltip content when triger is set to 'axis'.
    classesobject
    Override or extend the styles applied to the component. See CSS API below for more details.
    itemContentelementType
    Component to override the tooltip content when triger is set to 'item'.
    trigger'axis'
    | 'item'
    | 'none'    		'item'
    Select the kind of tooltip to display - 'item': Shows data about the item below the mouse. - 'axis': Shows values associated with the hovered x value - 'none': Does not display tooltip

    The component cannot hold a ref.

    CSS

    Rule nameGlobal classDescription
    root.MuiChartsTooltip-rootStyles applied to the root element.
    markCell.MuiChartsTooltip-markCellStyles applied to the markCell element.
    labelCell.MuiChartsTooltip-labelCellStyles applied to the labelCell element.
    valueCell.MuiChartsTooltip-valueCellStyles applied to the valueCell element.

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