nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Change label color on conditional basis in high chart

Hi Team,

I wanted to highlight label color on the basis of flag (Eg."BaseWeek == 1") from splineData dataset ,
Inside splineData we have data object and within this object we have BaseWeek flag .)
For reference i highlighted label's with yellow in attach file
Kindly go through the attachment for the image file.

Demo : https://jsfiddle.net/nilesh_nagdeve007/sq2pzkc9/24/
Attachments
sales-of-petroleum-produ (1).png
sales-of-petroleum-produ (1).png (82.47 KiB) Viewed 1030 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Change label color on conditional basis in high chart

Hi there,

Thank you for contacting us!

The conditional labels formatting can be easily achieved with the dataLabels.formatter. Take a look at the demo below, and tell me if that's what you wanted to achieve. Of course, you can rewrite the ternary operator to more complicated if statement, to get an even more accurate colour choice based on your data.

DEMO: https://jsfiddle.net/BlackLabel/wfzmnu1h/
API Reference: https://api.highcharts.com/highcharts/s ... .formatter

Regards!
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: Change label color on conditional basis in high chart

Hi kamil.m,
Thank you for your suggestion ,
In addition to your demo, how can i set background color for span, I am trying to set but its not working
Kindly go through the attachment for the reference
Attachments
bg_labels.png
bg_labels.png (6.29 KiB) Viewed 1018 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Change label color on conditional basis in high chart

You're welcome!

Take a look at the demo below, and of course adjust the colors and parameters to your liking.
DEMO: https://jsfiddle.net/BlackLabel/pdox7Lhu/
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: Change label color on conditional basis in high chart

Hi kamil.m,
I your demo, when i am downloading image in PPG format, background color is not showing in downloaded image.
Attachments
sales-of-petroleum-produ (2).png
sales-of-petroleum-produ (2).png (88.14 KiB) Viewed 990 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Change label color on conditional basis in high chart

Since background is added with HTML, please enable exporting.allowHTML in your config.

https://api.highcharts.com/highcharts/e ... .allowHTML
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: Change label color on conditional basis in high chart

Hi Kamil.m,
I am trying to download image from your demo itself and there I am not able to see background color in downloaded files.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Change label color on conditional basis in high chart

Have you set the exporting.allowHTML to true? In my case everything is working correctly.

https://jsfiddle.net/BlackLabel/7n5dmubc/

You might encounter an issue with the labels rotation. It seems that in the latest Highcharts version it is not rotating the labels after export. I will note that in the following GitHub issue, so feel free to follow it and wait for any fixes/workarounds.
GitHub Issue: https://github.com/highcharts/highcharts/issues/14875

Regards!
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: Change label color on conditional basis in high chart

Hi Kamil.M,

In your demo, you are using default functionality to download Image files for graphs, so that might be the reason allow HTML is working
fine. But, in my demo, I am converting graph images in SVG first and then converting to Base64 image, so is the reason allow HTML is not working.

I have created a demo to export images after clicking on the export button.

Demo: https://jsfiddle.net/nilesh_nagdeve007/8tovjw0c/19/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Change label color on conditional basis in high chart

Hello there,

Unfortunately, your demo doesn't work therefore I won't be able to tell what exactly is not working.

But if you need to get the Base64 data from your chart, I would suggest looking into this topic which shows step-by-step how to achieve it in Highcharts.
viewtopic.php?t=39980

Best regards!
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: Change label color on conditional basis in high chart

hi Kamil.M.
Now I commented on the code to convert the image into Base64 format.
Kindly guide me to show the background color for labels and how can I export in base64 image without using default functionality.

Demo: https://jsfiddle.net/nilesh_nagdeve007/8tovjw0c/56/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Change label color on conditional basis in high chart

Have you tried the solution mentioned in the topic I've sent you in the latest post? It is a clear guide on how to export the base64 image from Highcharts. I'm not sure what you mean by "without using default functionality".
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: Change label color on conditional basis in high chart

Hi Kamil.M,
I have gone through the solution which you provided, but there they did not give any solution to convert chart svg into Base64 string with angular .

It will be a great help if you guide me to convert SVG into base64 string with the angular code base.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Change label color on conditional basis in high chart

Hello,

This functionality is already out of the scope of our forum. Highcharts by default do not support exporting to Base64 string, we have shown you a JSFiddle example of how it could work, but if you would like to implement this 3rd party library in your Angular project, then I would suggest asking at their support channels since it's not related to Highcharts functionality.

In case of any other questions related to Highcharts functionality feel free to contact us anytime,
Regards
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”