[charts][docs] Need to document how to create a custom tooltip axisContent about mui-x

[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>
  );
};

[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

[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