[charts] Is there a way to customize the popup when hovering the MUIX PieChart sections?

[nessj1994]

The problem in depth

I would like to be able to add additional data to the hover popup that appears when mousing over a PieChart section shown below.

I am working on displaying some invoicing data for our customers. Currently it is showing the number of invoices in a given category, but I would also like to add total dollar amounts and other info on that with a custom component. I couldn't seem to find anything on the website that indicates if this is possible or not. I know with datagrids I can do things with custom components in the slots prop, but I wasn't sure if the charts have all that added functionality yet.

Full disclosure, I have not actually tested the latest version yet, but since this isn't a bug I don't really think that's quite as relevant. I will happily upgrade my dependency version if that's required for any potential answer you have to work. Otherwise, I just didn't feel like messing with it right now since this isn't a bug so much as it is something I'm wondering if I can do with current functionality of the charts.

Your environment

`npx @mui/envinfo`

``` I am using Chrome and Opera GX for testing System: OS: Windows 11 10.0.22631 Binaries: Node: 20.14.0 - C:\Program Files\nodejs\node.EXE npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.74) npmPackages: @emotion/react: ^11.11.1 => 11.11.4 @emotion/styled: ^11.11.0 => 11.11.5 @mui/base: ^5.0.0-alpha.91 => 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.21 @mui/icons-material: ^5.10.16 => 5.15.21 @mui/material: ^5.15.0 => 5.15.21 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/system: ^5.4.1 => 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-charts: ^7.16.0 => 7.16.0 @mui/x-charts-vendor: 7.16.0 @mui/x-data-grid: 6.20.3 @mui/x-data-grid-premium: ^6.19.2 => 6.20.3 @mui/x-data-grid-pro: 6.20.3 @mui/x-date-pickers: ^5.0.0 => 5.0.20 @mui/x-internals: 7.16.0 @mui/x-license-pro: 6.10.2 @types/react: ^18.0.15 => 18.3.3 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: 5.1.6 => 5.1.6 ```

Search keywords: PieChart MUIX Order ID: 93525

[michelengelen]

Hey @nessj1994 .... you can do so by adding your custom component to the tooltip slot: Overriding content

[nessj1994]

Ahh thank you. Sorry, I missed that because I wasn't working with the other charts. I briefly scrolled through those sections, but hadn't seen that they also support the slot changes. I'll go ahead and mark this as closed.

[github-actions[bot]]

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] We value your feedback @nessj1994! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!