CODEWITHSUNDEEP
mui-xmui-x-charts
Taylor
Taylor

Reputation: 31

MUI X Charts tooltip: Hide mark element

Screenshot from MUIX Docs showing tooltip with mark element:

img

Trying to hide the mark element in the MUI X Charts tooltip (colored dot meant to delineate which dataset is being displayed) as described here: https://github.com/mui/mui-x/issues/11150 - Maintainer describes how to pass along overrides via ThemeProvider but unfortunately I can't go that route with my project. Maintainer also points out that since the tooltip is appended to the end of the DOM when rendered, its tricky to target it.

Targeting via sx on the root chart element like so doesn't work either:

 sx={{
       "& .MuiChartsTooltip-mark": {
           display: "none",
        }
}}

I also tried targeting the .MuiChartsTooltip-mark class by adding a css rule to my parent wrapper component, no dice.

TIA for any suggestions!

Upvotes: 0

Views: 1357

Answers (1)

Taylor
Taylor

Reputation: 31

Fix (doesn't work w/TS today- see https://github.com/mui/mui-x/issues/12254):

slotProps={{
        popper: {
          sx: {
            ["& .MuiChartsTooltip-mark"]: {
              display: "none",
            },
          },
        },
      }}

Upvotes: 2

Related Questions