[charts] Missing documentation about how to add tooltip with composition

[noobDev31]

Steps to reproduce

Link to live example: (required)

Steps: 1.I have tried to use the ChartsReferenceLine for a BarChart in the following stackblitz -

https://stackblitz.com/edit/react-zxxkwu?file=Demo.tsx

2.But whenever i try to hover the bars it's hiding the default tooltip that i used to get

3.

Current behavior

Tooltip disappear when ChartReferenceLine is used.

Expected behavior

Tooltip shouldn't get effected whelther ChartReferenceLine is used or not.

Context

Trying to migrate ApexCharts to MUI charts

Your environment

npx @mui/envinfo

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: BarCharts

[alexfauquette]

Because you need to add the Tooltip ;)

<ResponsiveChartContainer {...config}>
    <BarPlot />
    <ChartsReferenceLine
      x={30}
      lineStyle={{ strokeDasharray: '10 5' }}
      labelStyle={{ fontSize: '10' }}
      label={`Wake up\n9AM`}
      labelAlign="start"
    />
    <ChartsReferenceLine y={50} label="Middle value" labelAlign="end" />
    <ChartsXAxis />
    <ChartsYAxis />
+   <ChartsTooltip />
</ResponsiveChartContainer>

https://stackblitz.com/edit/react-zxxkwu-vmrf7j?file=Demo.tsx

Maybe this docs section could get a bit more love https://mui.com/x/react-charts/composition/#interaction

[noobDev31]

Also @alexfauquette, you would say even for getting grid lines i would need to add -

+ <ChartGrid />

but the <ResponsiveChartContainer /> doesn't contain the grid prop

[alexfauquette]

Yes with composition you need to add everything. The main reason is that the element order impacts the rendering. For example

// Display the grid on top of the line plot
<ChartsContainer>
  <LinePlot />
  <ChartGrid />
</ChartsContainer>

// Display the line plot on top of the grid
<ChartsContainer>
  <LinePlot />
  <ChartGrid />
</ChartsContainer>

About composition, the best docs might be the source code which show how do we use composition internally: https://github.com/mui/mui-x/blob/master/packages/x-charts/src/BarChart/BarChart.tsx

[noobDev31]

Sure i will go through it thanks 👍