Kedor
Posts: 17
Joined: Fri Jan 03, 2020 1:25 pm

Highcharts datalabel transformed out of screen. Why?

For starters, i want to say i am using a little changed gauge version mentioned here:
viewtopic.php?p=151969
It is centering dataLabel under

Code: Select all

// Positions for data label
point.plotX = center[0];
point.plotY = center[1];

For now i have example only on video/gif. I will try to reproduce this in jsfiddle, but maybe thats enough.
So here is the example (i've set this value to reproduce problem, and changing min/max of the graph doesn't help) :
https://imgur.com/UbGipCV

The thing is when i reload the page, it tries to position this plotOptions.gauge.dataLabels
- some graphs have it already on place and its alright (seems like it depends if it have title/subtitle visible)
- some graphs have its value somehow animated to the place where should be, and right after that its hidden by transforming it out of screen

Code: Select all

transform: translate(17, -9999);
How can i disable that? Does it have something to do with overlapping?


Also my second question is if there is any way to change the font size to fit the area?
I tried getting the .highcharts-data-label text size, and .highcharts-pane-group size, and make font smaller (changing font in CSS) till it fits but it has problems with positioning the datalabel then, and often its not centered.

Code: Select all

while (dataLabelText[0].getBoundingClientRect().width > paneGroupWidth) {
   size = parseInt(dataLabelText.css("font-size"), 10);
   dataLabelText.css("font-size", size - 1);
   if (size <= 12) break;
}
Kedor
Posts: 17
Joined: Fri Jan 03, 2020 1:25 pm

Re: Highcharts datalabel transformed out of screen. Why?

I found why its actually "animated". Its caused by a part of the code which updates a title, to make it empty, and then set to a visible title (not sure why yet, that my problem).

Code: Select all

chart.update({title: {text: ''}});
chart.update({title: {text: oldTitle}});
Without that part of the code, graphs which title is "animated" and disappears is just not there for the whole time (always transformed -9999).
So the question remains why, and how to block that, allow to overflow or be positioned on this spot no matter what :P

https://imgur.com/i3RA05x
Kedor
Posts: 17
Joined: Fri Jan 03, 2020 1:25 pm

Re: Highcharts datalabel transformed out of screen. Why?

Hi again. Sorry for the spam, i found the reason. Debugged a bit and then found

Code: Select all

"allowOverlap":true
That helps with disappearing.

The only question that remains is my second question about scaling font to fit the available area.
jakub.s
Posts: 1228
Joined: Fri Dec 16, 2022 11:45 am

Re: Highcharts datalabel transformed out of screen. Why?

Hi,

Thanks for the question! I'm glad that you found the solution to the first problem you've described.

Regarding the second question, could you please reproduce this issue in an online code editor (minimal reproducible example)? You could start from here: https://jsfiddle.net/BlackLabel/ho69j0wn/

Then I'll gladly investigate this further and try to propose a solution.

Best regards!
Jakub
Highcharts Developer
Kedor
Posts: 17
Joined: Fri Jan 03, 2020 1:25 pm

Re: Highcharts datalabel transformed out of screen. Why?

Hi, of course!
https://jsfiddle.net/Kedor/z0acn8pr/10/

Here is the fiddle. Added the gauge from mentioned post, and also added buttons and my "idea" for scaling font.
Once you add few 0s using buttons, font is scalled down, but not always centered
jakub.s
Posts: 1228
Joined: Fri Dec 16, 2022 11:45 am

Re: Highcharts datalabel transformed out of screen. Why?

Hi,

Thanks for sharing!

The problem seems to be related to the custom resizeFont method. In short: when changing the font size you need to adjust the position as well.

I've added two sample lines of code which might help you with that.

Here's a demo: https://jsfiddle.net/BlackLabel/rsafzyb6/

If you adjust the x position appropriately, the text will stay in the center.

Please do not hesitate to ask in case you have any questions about this.

Best regards!
Jakub
Highcharts Developer

Return to “Highcharts Stock”