CODEWITHSUNDEEP
cssreactjsmaterial-uimui-xmui-x-charts
yem
yem

Reputation: 755

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

Upvotes: 2

Views: 796

Answers (2)

Quirzo
Quirzo

Reputation: 1424

The answer by Ahmet Emre Kilinc is no longer working with MUI-x version 7.16.0 or newer.

The & .MuiChartsTooltip-root seems to be changed to & .MuiChartsTooltip-paper.

Working version (tested with 7.22.2):

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

Upvotes: 0

Ahmet Emre Kilinc
Ahmet Emre Kilinc

Reputation: 6925

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.

Upvotes: 2

Related Questions