Hi ,
Is there a way to change the color of value labels in a pie chart?
Thanks
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:
-Hari
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'
})-Hari
Hi Hari,
Thanks for your help, but the isn't working for percentage value label. Please find the image for your reference
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:
-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"
})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 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?
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'
})
