Collision Detection for Data Labels
Implement collision detection algorithm that repositions overlapping data labels, with possible input parameters dictating a proportional distance to move labels away from each other, or directionality indicators.
-
Jade Dyer commented
very nice post There is a lot to be learned from posts like this. https://www.goldmindthoughts.com/trauma-recovery-coaching
-
eric ronald commented
It is very fantastic post it should be more promoted. https://authorcareynolds.com/
-
Lisa John commented
I like the valuable information you supply to your articles. I will bookmark your blog and check back here regularly. I'm sure I'll be told many new things right here! Goodbye to the next one! https://thewikiinc.com/
-
Michael Mayer commented
Something like this would be great:
https://exde601e.blogspot.com/2014/11/adding-labels-to-excel-scatter-charts.htmlAlso I apologize for commenting on other similar issues, but if there's some way to consolidate all the issues/votes from here, might be useful?
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/17173259-data-labels-with-collision-avoidance-and-connector -
Keith Dragon commented
in scatter plots, there are times where points have no dataLabel, even though nothing is anywhere near them. it is very frustrating, because users complain to me. allowOverlap is not a good solution because depending on what the user is looking at and how they are zoomed in, it may make things unreadable
-
Jakub Štěrba commented
I would like to have also option to either show all labels if they do not overlap or none. This is essential to have good looking charts on different screen sizes. While data labels may fit on desktop, it may be better to hide them on smaller screen because of overlapping. There is no point to show only some of them in case of many data points in my opinion except for showing for example only minimum and maximum values.
-
Mike Zavarello commented
I would like to add my voice to this conversation for bubble charts. Paweł Fus was gracious enough to offer a possible solution to this (see his comment at https://stackoverflow.com/q/48427876/2596103), but it unfortunately isn't effective for charts with lots of cramped, close bubbles and/or long labels. Another possible option could be adding connector lines to the bubbles, similar to the slices on the pie charts. Thank you!
-
RHC automation commented
A collision detection for data labels would also be absolutely necessary for the new sankey chart.
It would also be much better, if the dataLabels wouldn't be aligned in the middle of the sankey links but near the beginning of a link (most of the links are crossing in the middle and so a lot of dataLabels are overlapping).
see jsfiddle:
https://jsfiddle.net/RHCautomation/5yk3c19f/1/ -
Monte Shaffer commented
This collision detection algo could also be used for the word-cloud graph request... https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/4180727-add-a-word-cloud-graph
Therein, I have posted some basic collision-detection code.
-
AdminHenrik Skar (Admin, Highcharts JS) commented
Hey guys,
Thank you so much!
Let's see how the vote goes, and we will take it from there.Best regards,
Henrik Skar -
Jamie commented
Hello Henrik, and thanks.
The allowOverlap feature is a nice start, and may work in many use cases, but when you really need every point label to show, a more complex and intelligent solution is necessary.
With features like the overflow and crop properties already built in, and recognition of positive/negative values, and the detection that goes into the allowOverlap, Highcharts has done a great job in getting most of the way there :)
A fully featured positioning system would be a huge benefit to add on top of these features.
-
Alex commented
Yes this is a feature that I would like as well. Only the allowOverlap is not enough because the values are too close together to understand what they mean.
I have made a post on stackoverflow to find any workaround for this if any of you would like to share any ideas.http://stackoverflow.com/questions/39371979/how-to-fix-datalabels-animation-so-they-dont-overlap
-
AdminHenrik Skar (Admin, Highcharts JS) commented
Hi Jamie,
Thank you for sharing!
We will look into this and see if we can make it happen.
As of now, there's a feature for allowing overlap for you to play with: http://api.highcharts.com/highcharts/plotOptions.area.dataLabels.allowOverlap
Feel free to share your experience with us.Best regards,
Henrik Skar