[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

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 👍

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

Note

We value your feedback @noobDev31! 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!