mui
[charts] The tooltip should get a position option
Summary 💡
Come from this message: https://stackoverflow.com/questions/77590276/customize-the-tooltip-on-a-mui-graph
The solution: https://codesandbox.io/p/sandbox/reverent-night-xfjytg
The idea as I understand it is to force the x/y position of the popper instead of following the mouse position.
https://github.com/mui/mui-x/assets/45398769/f939b911-bb28-4a79-8893-d597b84c2eaf
Could be something like sltoProps.popper.placement = 'top' to force the tooltip to appear on top of the chart
Examples 🌈
No response
Motivation 🔦
No response
Search keywords: charts tooltip placement
Maybe somewhat overlapping issue:
If chart is placed near the edge of the screen, tooltip can be unreadable as it always gets placed to the right.
I've discovered that popper's position options can already be passed:
<BarChart
series={series}
xAxis={[xAxis]}
slotProps={{
popper: {
placement: "auto-start" // actually works
}
}}
tooltip={{
slotProps: {
popper: {
placement: "auto-start" // ignored
}
}
}}
/>
but note how there are 2 ways to do it, and one of them doesn't do anything. My issue is resolved.
@alexfauquette we should probably either remove tooltip.slotProps.popper from the typing (if not already) or do the merge correctly
Classic slot merging stuff :laughing:
