Tooltip is going under axis-component
Satyam7Jha opened this issue · comments
I am implementing the axis using React Portal. Sometimes, randomly, my tooltip goes inside the AxisLabel component.
Implementation: https://codesandbox.io/p/sandbox/highcharts-react-demo-1-9s7pyq?file=%2Fdemo.jsx%3A57%2C19
Hi @Satyam7Jha,
Thank you for contacting us!
This issue is related to pure Highcharts and well explained here: highcharts/highcharts#12236
As a solution enable outside option for toolip:
tooltip: {
outside: true
}
Live demo: https://stackblitz.com/edit/react-ekgasi
API Reference: https://api.highcharts.com/highcharts/tooltip.outside
Best regards!
Thanks, @ppotaczek, but I'd prefer not to enable the outside true option because my tooltip extends beyond the chart, making it look a bit awkward. Can you please suggest an alternative solution?
Hi @Satyam7Jha,
As an alternative solution, you can disable the default tooltip background and add your own by enabling useHTML option and styling returned HTML. For example:
tooltip: {
useHTML: true,
backgroundColor: 'transparent',
formatter: function (tooltip) {
const defaultVal = tooltip.defaultFormatter.call(this, tooltip);
const defaultValAsString = defaultVal.reduce(
(acc, val) => acc + val,
''
);
return `<div style="background-color: #fff; padding: 8px; border: 1px solid black;">${defaultValAsString}</div>`;
},
}
Live demo: https://stackblitz.com/edit/react-ekgasi
API Refernece: https://api.highcharts.com/highcharts/tooltip.formatter
Best regards!
https://codesandbox.io/p/sandbox/highcharts-react-demo-1-forked-6pw8ld?file=%2Fdemo.jsx%3A67%2C14
here iam using react portal to render custom tooltip then also it is happening.
Screen.Recording.2024-02-06.at.4.21.54.PM.mov
You can use the same technique for a custom tooltip rendered through React portals.
could you please add you fix in : https://codesandbox.io/p/sandbox/highcharts-react-demo-1-forked-6pw8ld?file=%2Fdemo.jsx%3A67%2C14.
Sure, the fix added in codesandbox: https://codesandbox.io/p/sandbox/highcharts-react-6f5kgd
Closed due to inactivity.