Bar labels are not align in converted SVG Download file

[nilesh.nagdeve]

Hi Team,

I am trying to adjust the labels with bar in high chart after downland SVG image.

I attached the screenshot from my implementations.

Kindly suggest on same.

[hubert.k]

Hi nilesh.nagdeve!
I was trying to reproduce your problem, but in my case, everything is working correctly. Here is the demo: https://jsfiddle.net/BlackLabel/u9ok6pgw/ and here is a screenshot of exported SVG image:

exported_datalabels.png (123.3 KiB) Viewed 569 times

Could you reproduce the issue in an online editor that I could work on? You can use my demo or create another one and send me a forked link.

I am looking for your response.
Regards!

[nilesh.nagdeve]

Hi hubert.k

Thank you for suggestion,
But in same example if i change the font size and trying to download SVG file.
And when doing zoom in download file we can see, labels are slightly moving in right side.

Example after i update the font size

https://jsfiddle.net/nilesh_nagdeve007/wu35v29a/6/


Refer attachment for labels

[hubert.k]

nilesh.nagdeve,
It is caused, by using the rotation of data labels. The point of origin of a transform is set to the top left corner, so if you rotate them to +/i 90 degrees it will cause a little offset, which can be fixed with dataLabels.x or dataLabels.y properties - like in the demo below.

Demo: https://jsfiddle.net/BlackLabel/6z2u0e5d/

Feel free to ask any further questions.
Regards!

[nilesh.nagdeve]

Hi Hubert.K

As per your suggestion , we implemented this same already and but facing same issue.
We are using stack bar and labels we are showing is sum of all in single bar. So added data for one Stack. in fiddle labels are not displaying not sure why, But in application is showing.

Here is demo which I created.
https://jsfiddle.net/nilesh_nagdeve007/y6wb3k9m/56/

In attachment added screenshots from UI application and After download image

[hubert.k]

nilesh.nagdeve,
I'm sorry but I think I'm missing something. Could you please show a little bit more light on the matter to help me understand it better? In my case, in the online demo, everything is exported correctly, as it is shown in the browser.

Regards!

[nilesh.nagdeve]

Hi Hubert.k,

In your demo , your are using data lables where for one column graph.
But i my demo , i am using stack labels instead for data lables (code is commented) inside column graph.
Kindly suggest something.

[hubert.k]

nilesh.nagdeve,
That's because stackLabels are working if you are using stacking in your column series. The label will be placed on top of positive columns and below negative columns. After adding stacking to plotOptions, exporting the chart to PDF shows the stackLabels correctly.

Demo: https://jsfiddle.net/BlackLabel/1xLrso2n/

Regards!

[nilesh.nagdeve]

Thank you for reply hubert.k

Now, in your demo link, stack labels are moving slight up , so i adjusted labelSpacing = "-30px" and for some bar labels are moving right side in UI (Highlighted in UI image file). When we download image we observe Labels are moving in right side of bar in downloaded PNG file. (Which is happening in our existing application , we are trying to adjust x value for stacklabel and rightSpacing inside formatter function)

Demo : https://jsfiddle.net/nilesh_nagdeve007/4u8ptgnx/1/
Kindly go through the attachment for UI Image and Download file

[hubert.k]

nilesh.nagdeve,
To export some HTML you should set exporting.allowHTML to true. Here is some docs: https://api.highcharts.com/highcharts/e ... .allowHTML

Demo: https://jsfiddle.net/BlackLabel/rfhmsequ/

Regards!

[nilesh.nagdeve]

Hi Hubert.K
In your demo link, labels are placed vertically on bar , but in downloaded png file from export option, labels are showing horizontally. I wanted to download same image which i am getting in UI.
Kindly go though the attachment

[hubert.k]

nilesh.nagdeve,
Unfortunately, this is a known bug, it is reported on our GitHub issues here: https://github.com/highcharts/highcharts/issues/14875 For that moment I am not able to give you any workaround for that bug other than using dataLabels instead of stackLabels, but please, leave your comment on this ticket and maybe someone will find a temporary solution for your problem.

Regards!

[nilesh.nagdeve]

Hi Team,
Do we have any temporary solution for this?

[hubert.k]

nilesh.nagdeve,

Unfortunately, actually, there is no workaround for this bug. Please, follow the topic on mentioned GitHub ticket, or even leave some comments and reactions there to show, that you are also waiting for some temporary solution.

Regards!