Annotation overlap when useHTML set to true
Posted: Wed Dec 05, 2018 8:40 am
by bxian
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 (6.99 KiB) Viewed 1261 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!
Re: Annotation overlap when useHTML set to true
Posted: Wed Dec 05, 2018 9:22 am
by bastss
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!
Re: Annotation overlap when useHTML set to true
Posted: Wed Dec 05, 2018 9:45 am
by bxian
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~
Re: Annotation overlap when useHTML set to true
Posted: Wed Dec 05, 2018 10:55 am
by bastss
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!
Re: Annotation overlap when useHTML set to true
Posted: Wed Dec 05, 2018 11:35 am
by bxian
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!
Re: Annotation overlap when useHTML set to true
Posted: Wed Dec 05, 2018 12:03 pm
by bastss
You're welcome!
If you will need more help with this chart - feel free to ask.
Best regards!