[charts][docs] Need to document how to create a custom tooltip axisContent

[jwitthaus]

Steps to reproduce

took your working example code from here: Link to live example: (required)

Steps:

1. tooltip={{ trigger: "axis", axisContent: CustomItemTooltipContent }}

Current behavior

runtime error: Cannot read properties of undefined (reading 'dataIndex') TypeError: Cannot read properties of undefined (reading 'dataIndex') at CustomItemTooltipContent (http://localhost:3000/static/js/bundle.js:1472:38) at renderWithHooks (http://localhost:3000/static/js/bundle.js:111489:22) at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:115460:17) at beginWork (http://localhost:3000/static/js/bundle.js:116763:20) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:101745:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:101789:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:101846:35) at beginWork$1 (http://localhost:3000/static/js/bundle.js:121744:11) at performUnitOfWork (http://localhost:3000/static/js/bundle.js:120992:16) at workLoopSync (http://localhost:3000/static/js/bundle.js:120915:9)

Expected behavior

custom tooltip rendered

Context

I want to show a custom tooltip in a stacked bar chart while hovering over the whole stack instead of just an item of a stack

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.5 Binaries: Node: 22.2.0 - /opt/homebrew/bin/node npm: 10.8.1 - /opt/homebrew/bin/npm pnpm: Not Found Browsers: Chrome: 126.0.6478.114 Edge: Not Found Safari: 17.5 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: ^5.15.18 => 5.15.20 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: ^5.15.18 => 5.15.20 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-charts: ^7.5.0 => 7.7.1 @mui/x-date-pickers: ^7.6.2 => 7.7.0 @types/react: 18.3.3 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: 4.9.5 ```

Search keywords: custom tooltip axis axisContent itemData dataIndex

[michelengelen]

Hey @jwitthaus I cannot reproduce the issue you are facing. Could you try and replicate this with more precise steps and explanation?

[jwitthaus]

@michelengelen here is a code sandbox. Hope this helps: https://codesandbox.io/p/sandbox/github/jwitthaus/barcharttest/tree/master/?file=%2Fsrc%2FApp.js when hovering you get the runtime error

[alexfauquette]

@jwitthaus The issue it that you customize the axis tooltip like if it was the item tootlip, but they don't have the same props. The main difference that impact your example:

• dataIndex is directly in the props. not into an itemData object
• series is not one series, but an array of multiple series (sorry but english does not have plural form) you will have to map

Here is an working example

const CustomItemTooltipContent = (props) => {
  const { dataIndex, series } = props;
  return (
    <Paper sx={{ padding: 3, backgroundColor: series.color }}>
      <p>{series.label}</p>
      <p>{series[0].data[dataIndex]}</p>
      <p>{series[1].data[dataIndex]}</p>
      <p>{series[2].data[dataIndex]}</p>
    </Paper>
  );
};

[jwitthaus]

awesome this works and makes sense. Thank you very much. Is there a documentation for the axis tooltip props?

[alexfauquette]

Not that I'm aware of. The best documentation might be to look at the default component implementation: https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx

I keep this issue open to know we need to add such documentation