Search code examples
cssreactjsmaterial-uimui-x

Styling popover/tooltip in mui graphs

Has anyone had any luck customizing the styles for the popover/tooltip in mui charts?

This feels like something that should be relatively simple, but I've looked everywhere and while I've found plenty on how to format the data itself, I'm having trouble finding any documentation that explains how to style the css.

I've tried both using the class names listed here and tried passing styles via the slotProps but have yet to find something that has worked.

I'm including a screenshot below of the component that I'm trying to style.

enter image description here

Solution

  • You can set tooltip styles through popper prop of slotProps like this:

    slotProps={{
    popper: {
      sx: {
        border: '4px solid yellow',
        borderRadius: '20px',
        backgroundColor: 'red',
        '& .MuiChartsTooltip-root': {
          backgroundColor: 'red',
          '& .MuiTypography-root': {
            color: 'blue',
          },
        },
      },
    },
}}

    You can take a look at this StackBlitz for a live working example.