Vertical datalabel suppressed for last column

[kzoon]

Expected behaviour

All categories in a column chart should have data labels when there is enough space to render them.

Actual behaviour

The last data label in a column chart gets suppressed when data labels are rotated. This happens when you limit the width of the chart. The new chart width leaves enough space to render the data label.

Live demo with steps to reproduce

http://jsfiddle.net/kzoon/2bd8vomc/1/

Product version

Highcharts v6, v7

Affected browser(s)

All

[sebastianbochan]

Hi @kzoon,
Thank you for reporting. The space for labels is calculated before rotating, by default. If you disable the series.dataLabels.crop option, then datalabel will be visible.

Demo:

• http://jsfiddle.net/BlackLabel/cra642v0/

Docs:

• https://api.highcharts.com/highcharts/series.line.dataLabels.crop

@TorsteinHonsi Should we consider it as a bug ?

[kzoon]

Thanks for your quick response. I can work with the datalabels.crop option for now.

But I still consider this a bug, because I can't have cropped vertical data labels.
See http://jsfiddle.net/kzoon/2bd8vomc/4/

By the way: vertical labels are cropped, even when the horizontal label would fit. So you must be doing some cropping after rotation... See http://jsfiddle.net/kzoon/2bd8vomc/7/

[KacperMadej]

Let's keep this issue open until we'll decide if this is a bug or not.

[TorsteinHonsi]

Yes it's a bug. I thought we had is covered, see #4779 and the test at https://jsfiddle.net/highcharts/fLcjuspq/. But the problem in #4779 was the opposite, we had rotated labels displayed outside when they should have been cropped.

[kzoon]

I have a new version release in three weeks time.
Any change of fixing this soon?
Obviously, I like a fix better than having to implement a workaround...

[KacperMadej]

There's no ETA for the fix at this moment. It's doubtful that the fix will make it to 7.0.2 (planned to be released within next few days).
I know that you prefer a fix, but if a workaround will be of any use for you please let me know and I'll prepare a demo.

[kzoon]

I was planning to disable series.dataLabels.crop as a workaround. But if you have a more elegant workaround, I'm certainly interested!

[KacperMadej]

@kzoon
Here's a workaround that is not fully tested, but works in case of your original demo. Additional adjustment is at JS line number 106. Demo: http://jsfiddle.net/BlackLabel/rzL8buh7/

Internal note:
The change affects the related issue #4779 demo by keeping and cropping away different labels, but the general rule of cropping what's outside is kept. Demo: https://jsfiddle.net/BlackLabel/hn8xtebu/

[kzoon]

The workaround very soon suppresses the first label in my charts. See example http://jsfiddle.net/kzoon/xtwyqrm3/18/

Somehow this is caused by my use of Min and Max on the x-axis.

I started doing this as a suggested workaround for tick marks and labels not being rendered when there was no data in the chart. The link to the Highchart issue no longer works (http://forum.highcharts.com/highcharts-usage/show-category-labels-when-there-is-no-data-t32428/), so I can't check if using Min/Max is still needed.

Is there a way to make the current workaround work with Min and Max on the x-axis?

[KacperMadej]

Working forum link: https://www.highcharts.com/forum/viewtopic.php?f=9&t=32428
Adjusted the workaround for your last demo: https://jsfiddle.net/BlackLabel/j9xvwefh/1/

[kzoon]

Thanks very much! Now I can implement a workaround in my next version.

I improved the workaround slightly:
With alignAttr.x -= negRotation ? bBox.height * 0.2 : 0; the right hand data label disappears when I lower the chart container width to 450px: https://jsfiddle.net/kzoon/afcu2908/
When I use 0.3 instead of 0.2, I can go down as low as to chart container width 350px: https://jsfiddle.net/kzoon/afcu2908/2/

[KacperMadej]

Workaround idea for now is to adjust the value until the chart is rendered correctly. Currently there's no better logic to decide when the labels should be hidden, but this issue is still open, so we'll be looking for a proper fix.

[kzoon]

Actually,
This is the better workaround: alignAttr.x -= negRotation ? (bBox.width / 2) : 0;

It works on the narrowest of charts:
https://jsfiddle.net/kzoon/afcu2908/68/

Thanks again. I have enough to go ahead

[kzoon]

Still an issue in 7.2.1

[kzoon]

Still an issue in v9.0.1.
Still using a work around (https://jsfiddle.net/kzoon/afcu2908/68/)
I don't understand why these kind of bugs are allowed to linger on an on....

[kzoon]

I am sorry to see this issue still open in V10.0. How can issues stay open for 3+ years???

For anyone having the same issue: this rough workaround works on V10.0: https://jsfiddle.net/kzoon/afcu2908/70/

[raf18seb]

Hi @kzoon,

Thank you for updating a workaround and sorry it's been hanging for so long. We'll try to prioritize and we'll provide more info soon. Thank you for bumping this up.

[KacperMadej]

In case overlapping is not an issue, crop: false gives the same results as the workaround (at least in the last shared demo): https://jsfiddle.net/BlackLabel/yktLnvga/

[kzoon]

Cropping has been discussed above: #9687 (comment)