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

Annotation overlap when useHTML set to true

Wed Dec 05, 2018 8:40 am

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 57 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
Posts: 140
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation overlap when useHTML set to true

Wed Dec 05, 2018 9:22 am

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!

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

Re: Annotation overlap when useHTML set to true

Wed Dec 05, 2018 9:45 am

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
Posts: 140
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation overlap when useHTML set to true

Wed Dec 05, 2018 10:55 am

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!

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

Re: Annotation overlap when useHTML set to true

Wed Dec 05, 2018 11:35 am

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
Posts: 140
Joined: Wed Oct 17, 2018 10:59 am

Re: Annotation overlap when useHTML set to true

Wed Dec 05, 2018 12:03 pm

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

Best regards!

Return to “Highcharts Usage”