[charts][PieChart] prop.slots and prop.slotProps not passed to <ChartsTooltip />

[tonytino]

Steps to reproduce

Link to live non-working example (PieChart): https://codesandbox.io/p/sandbox/sleepy-greider-xyc9w2?file=%2Fsrc%2FDemo.tsx%3A46%2C36
Link to live working example (BarChart): https://codesandbox.io/p/sandbox/affectionate-thompson-whdvs2?file=%2Fsrc%2FDemo.tsx%3A9%2C12

Steps:

1. Implement a basic usage of <PieChart />
2. Attempt to make a custom tooltip for it using props slots={{ itemContent: CustomComponent}} and tooltip={{ trigger: 'item' }}
3. Continue to see default tooltip

Current behavior

Default tooltip renders

Expected behavior

Custom tooltip renders

Context

Leverage a custom tooltip for a basic <PieChart /> implementation (i.e. not composition-based).

---

The PieChart documentation suggests that it should be possible to override the default tooltip by passing a custom component to slots.itemContent. However, as of v7.3.1, this is still not having any impact on the rendering of the tooltip.

This appears to be due to the necessary props not being passed along to enable this behavior within PieChart.tsx specifically.

PieChart Implementation

mui-x/packages/x-charts/src/PieChart/PieChart.tsx

Line 186 in 2b4a75d

<ChartsTooltip {...tooltip} />

BarChart and LineChart Implementation

mui-x/packages/x-charts/src/BarChart/BarChart.tsx

Line 201 in 2b4a75d

<ChartsTooltip {...tooltip} slots={slots} slotProps={slotProps} />

mui-x/packages/x-charts/src/LineChart/LineChart.tsx

Line 230 in 2b4a75d

<ChartsTooltip {...tooltip} slots={slots} slotProps={slotProps} />

ScatterChart Implementation

The ScatterChart also appears to have this issue.

mui-x/packages/x-charts/src/ScatterChart/ScatterChart.tsx

Line 175 in 2b4a75d

<ChartsTooltip trigger="item" {...tooltip} />

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.3
  Binaries:
    Node: 18.20.0 - ~/.nvm/versions/node/v18.20.0/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 124.0.6367.93
    Edge: Not Found
    Safari: 17.3
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.34
    @mui/core-downloads-tracker:  5.15.14
    @mui/icons-material: 5.15.7 => 5.15.7
    @mui/material: 5.15.7 => 5.15.7
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.14
    @mui/types:  7.2.14
    @mui/utils: 5.15.7 => 5.15.7
    @mui/x-charts: 7.3.1 => 7.3.1
    @mui/x-data-grid: 6.19.10 => 6.19.10
    @mui/x-date-pickers: 6.19.9 => 6.19.9
    @types/react: 18.2.39 => 18.2.39
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.3.3 => 5.3.3

Search keywords: tooltip, slots, slotProps, piechart

[michelengelen]

@JCQuintas can you please handle this one?

[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.

@tonytino: 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.