Tooltip position in stacked bar

[vishalpawar048]

Hi Team,

We are working on adding a custom tooltip on the stacked bar chart.

https://stackblitz.com/edit/react-msyvs8?file=index.js

We are struggling with the positioning of the tooltip. We want the tooltip to be at the top center (PFA) of the respective bar but currently, it is positioned at the top right. If we use the positioner property in the tooltip to shift the tooltip to the center the tooltip arrow disappears.

Can you help us with the configuration where the tooltip is at the top center with the tooltip arrow?

Thank you

[dawid.d]

Hello,

Thanks for contacting us with your question!

Changing the tooltipPos parameter for the points in the render event should resolve the issue. See the demo below.

Demo: https://stackblitz.com/edit/react-zjwodo?file=index.js

Let me know if that's what you were looking for!
Best regards

[vishalpawar048]

Hi,

Thank you for the response.

There is one more problem to the proposed solution. If we add padding or margin to the parent div of highchart then the positioning of the tooltip changes. How do I configure the tooltip to be positioned at the top center of the sub bar, irrespective of the margin and padding applied to the parent?

https://stackblitz.com/edit/react-vz9ev7?file=index.js

Thanks..

[dawid.d]

Hi,

Just include this padding in your position calculation, see: https://stackblitz.com/edit/react-rme1rb?file=index.js

Regards!

[graphlover]

Hi,
I am trying to achieve similar tooltip position in my code for v10.2.1.
I am unable to center the tooltip above each bar, below is what I have achieved so far.

https://jsfiddle.net/tamr56yn/78/

[dawid.d]

Hello,

Thanks for the question!

I debugged your code and made some changes:
1. the render option should be in the events option, not directly in chart.
2. The series type you are using is bar, so the height of a point is typically its absolute width, since the axes of this series are reversed. This had to be changed in the tooltip position calculation.
3. I changed the position of the tooltip to below the series. Alternatively, you could have added a margin at the top to make the tooltip fit. If you want to restore it, remove + 90 on line 68.

Demo: https://jsfiddle.net/BlackLabel/fvw3apcn/

Let me know if this is what you needed!
Best regards