Open noobDev31 opened 3 months ago
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
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
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
Sure i will go through it thanks 👍
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
``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```npx @mui/envinfo
Search keywords: BarCharts