bxian
Posts: 3
Joined: Wed Dec 05, 2018 8:22 am

Annotation overlap when useHTML set to true

I use annotations.labelOptions and set useHTML to true. So annotation box is svg and annotation label is html.
The annotation overlap together when the location is near.
highchart_annotations.png
highchart_annotations.png (6.99 KiB) Viewed 1226 times

I was met the similar issue for tooltip, the tooltip's label was overlap by html element created by useHTML.
And figure it out by using: https://api.highcharts.com/highcharts/tooltip.outside

Any suggestion? Have a nice day!
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation overlap when useHTML set to true

Hello bxian,

Welcome to Highcharts forum! Back to your issue - could you send your demo example? In my code, everything works fine, even with useHTML property set to true. Check demo: http://jsfiddle.net/Bastss/y3kq5wfr/. Perhaps you have allowOverlap options set to true? API: https://api.highcharts.com/highcharts/a ... lowOverlap

Kind regards!
Sebastian Wędzel,
Highcharts Developer
bxian
Posts: 3
Joined: Wed Dec 05, 2018 8:22 am

Re: Annotation overlap when useHTML set to true

Thanks for your reply!
I use the allowOverlap options and set to true, in my case the annotation was created from user input and require to display all the annotations on graph.
I'm not very familiar with front-end but after google I've found that the svg didn't support z-index.
I fork the example from your demo and set the allowOverlap to true:
http://jsfiddle.net/1dh49n7u/

Appreciated~
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation overlap when useHTML set to true

bxian,

With allowOverlap set to true, there is no chance to avoid overlapping. I can suggest you position these annotations to make enough space for each, but as you said annotation is created from a user, so you don't know how big it will be. Examples with positioned annotations: http://jsfiddle.net/gh/get/library/pure ... nnotations & http://jsfiddle.net/Bastss/xLd4mv38/.
Another idea is to set this information into the tooltip and it will be displayed when a user hovers a point.

Kind regards!
Sebastian Wędzel,
Highcharts Developer
bxian
Posts: 3
Joined: Wed Dec 05, 2018 8:22 am

Re: Annotation overlap when useHTML set to true

Hi bastss,

Thanks a lot!
I try set the allowOverlap to false but it doesn't help.
Maybe it related to we create a feature that can drag the annotation, by remove old one, dragging a fake element, them recreate a new one in new position.
Will try to find work around for it.

Again, appreciate your help~

Best regards!
bastss
Site Admin
Posts: 1192
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation overlap when useHTML set to true

You're welcome! :) If you will need more help with this chart - feel free to ask.

Best regards!
Sebastian Wędzel,
Highcharts Developer

Return to “Highcharts Usage”