[charts] Chart tooltips not working correctly in shadow dom

[mAllenBond]

Steps to reproduce

Link to live example: Sandbox

The above example is forked from This sandbox which is from https://mui.com/material-ui/customization/shadow-dom/#how-to-use-the-shadow-dom-with-material-ui

Steps:

1. Use Charts in any environment that embeds react using a shadow dom
2. Observe tooltip behavior

Current behavior

When embedding charts in our host env, we observed that tooltip styles and behavior are not properly contained in the shadow dom. My only guess would be that the popper component being used in the charts needs to have its container properly set, but I'm not sure how or if that's possible currently.

Expected behavior

The tooltip (popper) in mui charts should render properly in a shadow dom container.

Context

I am trying to accomplish precisely what is described above and demonstrated in the sandbox:

1. Make a bar chart
2. Embed the bar chart in an environment where we use the shadow dom to control styles.
3. Have the bar chart tooltip render and behave as expected.

Your environment

npx @mui/envinfo

Tested on Google Chrome

  System:
    OS: macOS 14.3.1
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    Yarn: 4.1.1 - ~/.asdf/installs/yarn/1.22.19/bin/yarn
    npm: 9.5.1 - ~/.asdf/installs/nodejs/18.16.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.128
    Edge: Not Found
    Firefox: 123.0.1
    Safari: 17.3.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.22 
    @mui/core-downloads-tracker:  5.15.12 
    @mui/icons-material: ^5.15.12 => 5.15.12 
    @mui/lab: ^5.0.0-alpha.167 => 5.0.0-alpha.167 
    @mui/material: ^5.15.12 => 5.15.12 
    @mui/private-theming:  5.15.12 
    @mui/styled-engine:  5.15.11 
    @mui/system:  5.15.12 
    @mui/types:  7.2.13 
    @mui/utils:  5.14.16 
    @mui/x-charts: ^7.0.0-beta.6 => 6.19.5 
    @mui/x-data-grid:  6.19.6 
    @mui/x-data-grid-premium: ^6.19.6 => 6.19.6 
    @mui/x-data-grid-pro:  6.19.6 
    @mui/x-date-pickers:  6.19.6 
    @mui/x-date-pickers-pro: ^6.19.6 => 6.19.6 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: ^18.2.64 => 18.2.64 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.4.2 => 5.4.2 

Search keywords: charts tooltip shadow dom
Order ID: We use the Premium plan, I'm a dev and don't have the order ID or support key ^

[mAllenBond]

I poked the bug a little more and asserted that it is indeed an issue with the container prop not being inherited from the MuiPopper defaultProps in the theme.

Working Example Sandbox

[michelengelen]

Hey @mbond-SCW,
thanks for raising this issue. I can confirm the bug and have added it to our board.

Whilst testing your live example I came across another thing. When rendering the Chart in the normal DOM the styles get loaded when hovering the bars and then they also work for the shadow DOM:

Screen.Recording.2024-03-15.at.11.09.58.mov

[AnnikaNissen]

Are there any news on this bug or suggestions for a workaround? I'm running into the same issue.

What I noticed:
When I set the container for MuiChartsTooltip in the MuiTheme, it works.

MuiChartsTooltip: {
      defaultProps: {
        slotProps: {
          popper: {
            disablePortal: false, // in out theme, this defaults to true for the MuiPopper component
            container: () => {
              const shadowHost = document.querySelector('create-car-app');
              const shadowRoot = shadowHost?.shadowRoot;
              const createCarMain = shadowRoot?.querySelector('#createCarRoot');

              return createCarMain || null;
            },
          },
        },
      },
    },

But when I do it in my component, like so, it does not work (although I'd expect these two approaches to give the same result):

<LineChart
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
          },
        ]}
        width={500}
        height={300}
        tooltip={{
          slotProps: {
            popper: {
              disablePortal: false,
              container: () => {
                const shadowHost = document.querySelector('create-car-app');
                const shadowRoot = shadowHost?.shadowRoot;
                const createCarMain =
                  shadowRoot?.querySelector('#createCarRoot');

                return createCarMain || null;
              },
            },
          },
        }}
      />

So it seems like when using the component, tooltipp.slotProps are not passed/parsed correctly.

---

EDIT (2 hours later ^^):

I made it work using the following code:

const chartContainer = React.useRef<HTMLDivElement | null>(null);

return <div id={'chartContainer'} ref={chartContainer}>
<LineChart
        xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
        series={[
          {
            data: [2, 5.5, 2, 8.5, 1.5, 5],
          },
        ]}
        width={500}
        height={300}
       slotProps={{
          popper: {
            disablePortal: false,
            container: chartContainer.current,
          },
        }}
      />
</div>

Key changes: the popper-props need to be set directly on the LineChart component, not in the tooltip.slotProps. That is caused by the following code in useLineChartProps(), where tooltips slot and slotProps are overwritten by the linecharts slot and slotProps: https://github.com/mui/mui-x/blob/master/packages/x-charts/src/LineChart/useLineChartProps.ts#L171
(I'm not sure wether this is a bug or a feature. But would be nice if this was visible somewhere in the docs).

[alexfauquette]

@AnnikaNissen Thanks for the clear explaination of your issue.

Effectively. tooltip.slotProps.popper is not correctly propagated because of those lines

mui-x/packages/x-charts/src/LineChart/useLineChartProps.ts

Lines 168 to 172 in 5b48909

	const tooltipProps: ChartsTooltipProps<'line'> = {
	...tooltip,
	slots,
	slotProps,
	};

You can overcome this issue with slotProps={{ popper: { disablePortal: false, container: chartContainer.current } }}

@mAllenBond This explain the root cause of your issue I never understood. In v6, <Tooltip /> was coming from @mui/base which does not apply the theme default props. So the container was not applied. In recent version of the package, we moved back to @mui/material so with latest version the codesandbox does not have issue anymore

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mAllenBond How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.