how to change the styling of the datalabel in highcharts of Donut chart

[Prithvi]

Below questions were related to donut chart of Highcharts.

1. For a donut chart, I assigned name property as "Count" <br> "Type" . I want to give one font style and size to the "Count" value and another font style for "Type". Could you please tell me how can i do this in HighCharts ? Thanks.
Example Name values : 20 Type1

30 Type2

2. Even after specifying distance set for a slice in donut chart, data labels were displaying closer for few slices and farther for few slices. It is not consistent. Could you please tell me if it is possible to keep consistent distance across all slices irrespective of Data labels length ?

Thanks.

[dominik.c]

Hello Prithvi!

Welcome to our forum and thanks for contacting us with your question!

I think that you could change font style and its size over here: https://api.highcharts.com/highcharts/p ... bels.style

You can specify the distance for each point separately to make sure that they are placed where you want.
https://api.highcharts.com/highcharts/p ... s.distance

If you have any problems with this issue, please reproduce your issue in an online editor I could work on.

Best regards!

[Prithvi]

Thanks for your response.

Please find the online editor.

https://jsfiddle.net/yz2v5mso/1/

Questions :

1. In the online editor, I assigned data label as : '2<br>Grapes', I want to give one font style and size to the "2" value and another font style for "Grapes". Could you please tell me how can i do this in HighCharts ? Similar for title inside the pie chart, i would like to give one font style for "18" and one font style for "Total" text

2. Even after specifying distance set for a slice in donut chart, data labels were displaying closer for few slices and farther for few slices. It is not consistent. Could you please tell me if it is possible to keep consistent distance across all slices irrespective of Data labels length ?

As you can see i assigned distance : 20 for the datalabels. But still i see it is not coming exact on top of each slice. Is it possible to show data label exact on top of each slice ? Please let me know.

Thanks.

[dominik.c]

Hi again!

Thanks for your demo.

1. I suggest changing the name of the points so it will no longer have br tag. Then we can split the name of the point into an array (each element is one word) and print it using formatter function. Inside the function you can also stylize each word however you like. Check it out in the demo.

2. In your demo I can't see distance property set to 20, but I'm afraid that there's no easy way to place each dataLabel exact on top of each slice and you would need to do this manually by adjusting proper values for x, y and distance properties for each slice.

API references:
https://api.highcharts.com/highcharts/p ... s.distance
https://api.highcharts.com/highcharts/p ... taLabels.x
https://api.highcharts.com/highcharts/p ... taLabels.y
https://api.highcharts.com/highcharts/p ... .formatter

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

Best regards!

[Prithvi]

Hi,

Thank you very much. I would try and get back to you on styling data labels as mentioned in the demo.

Could you able to provide me sample demo(may be on the same demo) on placing each data Label exact on top of each slice by adjusting values for x, y and distance properties for each slice ?


Thank you again.

[dominik.c]

Hi again!

Sure, here you've got a demo with adjusted x and y values of dataLabels: https://jsfiddle.net/BlackLabel/Ln09qado/

Best regards!

[Prithvi]

Thank you again Dominik for providing sample demo. As these values are hard coded, we can adjust accordingly in demo. In my case, these counts would
come from database. Can we adjust these X and Y values dynamically based on data we receive from Database ? Do we have any fixed boundaries we can use to adjust these X and Y values automatically based on dynamic data ?

Please let me know.

Thanks again.

[dominik.c]

Hi again!

Sure, we can use the load function for that and over there update the coordinates of the dataLabel for a specific point. These values can come from your database for example. In the demo, I've hardcoded them as variables.

API references:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/class-refere ... int#update

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

Best regards!

[Prithvi]

Thanks again for the sample demo. As per the demo, we were adjusting X & Y values based on specific point as shown below.

chart.series[0].data[0].update({
dataLabels: {
x: -40,
y: -140
}
})

As these values come from Database, can X&Y values be adjusted automatically based on data , so that we donot need to hard code x: -40 and y:-140 or with some other values as we are not sure about the data values from DB ?

If we can fix boundaries of X & Y values based dynamic data as shown in below example then i guess it will help to show the data labels exact on top of the Pie slice. Based on below example is there any way to set the boundaries of X and Y values so that it can include any value coming from DB and can show data labels exact on top of each slice ? Please let me know if this is possible.

for ex: any percent greater > 70 then use this X and Y values ,
between 50 and 70 then use this X and Y values
between 30 and 50 then use this X and Y values
< 30 then use this X and Y values


Thanks

[dominik.c]

Hi again!

Unfortunately, there are no simple ranges for x and y values that would place the dataLabel on the top of each slice. The most universal way to do it would be to set distance property to 0, like that: https://jsfiddle.net/gh/get/library/pur ... -distance/

But when you format dataLabels and change their size etc. it won't work so well. Your demo without formatter: https://jsfiddle.net/BlackLabel/qnsu1mk8/

Best regards!

[Prithvi]

Thanks Dominik for your response. I will look into all the options you suggested.

Thanks again.

[dominik.c]

You're welcome!

In case of any further questions, feel free to contact us again.

[Prithvi]

Hi Dominik,

Can we show everything as legends beside the pie chart instead of showing data label on top of each slice as mentioned in below demo ? If yes, could you please update this demo and show me ? This will help us to overcome arranging x and y values that would place the data Label on the top of each slice.

https://jsfiddle.net/BlackLabel/Ln09qado/

Thanks.

[dominik.c]

Hi again!

Sure, we can display the same dataLabels as legend using labelFormatter. We only need to copy and paste the code (with one small change) we had in formatter function.

API references:
https://api.highcharts.com/highcharts/l ... lFormatter

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

Best regards!