Hide dataLabels when they cannot fit in column/bar
When you have a dataLabels displayed on bars/columns that are all low value and close to one another, the dataLabels become merged and unreadable.
I added some code in the alignDataLabel function that hides the dataLabel if it cannot fit inside the column/bar it is to be displayed in. When the column/bar size changes by either resizing the window or by turning off some series the dataLabel becomes visible, or invisible if made smaller.
Here is a gallery demonstrating the changes: http://imgur.com/a/Qn6ui
The changes are simply adding the following code to the alignDataLabel function:
if ((point.series.options.stacking != null && point.series.options.type == "column") && (alignTo.height + 10 < dataLabel.height)) {
dataLabel.hide();
}
else if ((point.series.options.stacking != null && point.series.options.type == "bar") && (alignTo.width < dataLabel.width)) {
dataLabel.hide();
}
-
Jon commented
It would also be really helpful if the <textarea> for the label was constrained to the size of the bar/column segment it is inside of -- especially with long text labels to prevent them running outside the bar.
-
Anonymous commented
Where can I found this alignDataLabel function?