cancel
Showing results for 
Search instead for 
Did you mean: 

Pie Chart Value label color

rahuldhomane
10 - ETL
10 - ETL

Hi ,

Is there a way to change the color of value labels in a pie chart? 

Thanks

1 ACCEPTED SOLUTION

@rahuldhomane ,

Previous script is to change color of outer labels (I thought requirement is to change color of labels outside piechart). 

If you are trying to change colors of labels inside piechart (in your screenshot 43%, 40%, 12%, 5%), try this script:

 

widget.on('domready', function(se, ev){
	$('piechart .pie-percent-label').css('fill', 'green')
})

 

Result will looks like: 

harikm007_0-1645681502448.png

 

-Hari

View solution in original post

11 REPLIES 11

harikm007
13 - Data Warehouse
13 - Data Warehouse

@rahuldhomane ,

If you are looking for applying same color for all value labels, try this script:

widget.on('processresult', function(se, ev){
	ev.result.plotOptions.pie.dataLabels.color = 'red'
})

harikm007_0-1645643426723.png

-Hari

 

Hi Hari,

Thanks for your help, but the isn't working for percentage value label. Please find the image for your reference

@rahuldhomane ,

Previous script is to change color of outer labels (I thought requirement is to change color of labels outside piechart). 

If you are trying to change colors of labels inside piechart (in your screenshot 43%, 40%, 12%, 5%), try this script:

 

widget.on('domready', function(se, ev){
	$('piechart .pie-percent-label').css('fill', 'green')
})

 

Result will looks like: 

harikm007_0-1645681502448.png

 

-Hari

Hari,

I'm attempting to change the font weight of pie dataLabels and not having luck.  Can you point out what is wrong with my script?  Thanks, - Dennis

widget.on('processresult', function(se, ev){
ev.result.plotOptions.pie.dataLabels.style.fontWeight = "bold"
})

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi @Dennis_M ,

Try this script

widget.on('processresult', function(se, ev){
	ev.result.plotOptions.series.dataLabels.style = {fontWeight:'bold'}
})

-Hari

Thanks Hari for assisting me on the fontWeight .  Java/CSS is still very new to me.  - D

Howard
8 - Cloud Apps
8 - Cloud Apps

Hi @harikm007 ,

I've used the code in this topic to change the font Weight successfully.

Since I would like to change font weight and font size in the same code, so I used the code like below:

widget.on('processresult', function(se, ev){
ev.result.plotOptions.series.dataLabels.style = {fontWeight:'bold'};
ev.result.plotOptions.series.dataLabels.style = {fontSize:'10px'}
})

However, it didn't work.

Can you kindly let me know how to fix it?

Thank you!

Howard

Hi @Howard,

I was able to change the font size using the line below, hope this helps.

ev.result.plotOptions.pie.dataLabels.style.fontSize = '20px'

Hi @zach_myt 

Thank you for your help.

I have tried the code you provide. However, it didn't work.

The fontWeight was changed, yet the fontSize remained the same.

My Code is like:

widget.on('processresult', function(se, ev){
ev.result.plotOptions.series.dataLabels.style = {fontWeight:'bold'};
ev.result.plotOptions.pie.dataLabels.style.fontSize = '20px'
})

I also tried this, but it didn't work either:

widget.on('processresult', function(se, ev){
ev.result.plotOptions.series.dataLabels.style = {fontWeight:'bold'}
});

widget.on('processresult', function(se, ev){
ev.result.plotOptions.pie.dataLabels.style.fontSize = '40px'
})

Is there anything wrong in the script?

zach_myt
10 - ETL
10 - ETL

Hi @Howard a few questions:

1) Is your widget a pie chart?

2) Do you have any other code in the widget script section?

3) Open developer tools (F12) and reload the page, do you see any errors?

I used the code below and it worked fine.

widget.on('processresult', function(se, ev){
ev.result.plotOptions.pie.dataLabels.style.fontSize = '40px'
})

 

Hi @zach_myt 

Thanks you.

The anwer of 1)  and 2) is yes.

However, in developer tools I find that there's a permissions policy violation. 

It seems that it's the reason why the code is not working.

I'll solve the problem above and try the code you provided.

Thank you for your kindly help!!