How to change the color of the font inside a pie chart based on its value?

Hello again folks,

I would like to change the font color just inside a pie chart via custom CSS/JS styling based on its value. For example, I have a pie chart with the following colors (can’t change pie chart colors):

As you can see, its hard to read “On Time” or “Late”. But let’s say I want “On Time” to be white, but “Late” to be a different color. How would I go about doing that?

Thank you


Which color palette are you using in Arcadia? Can you take a snapshot?

Thank you,
Tadd Wood

Hi Tadd, I’m using my own color palette. It has 4 colors total, if that helps.


Are you seeing this problem when you use our default color palettes? I’m not able to reproduce the issue at the moment, even with custom color palettes. Usually what happens is that we automatically adjust the font color to white when the color becomes too dark. I’ve tried to match your colors and it appears the font shows up white. Do you have any custom styles active on this dashboard or visual?

Thank you,
Tadd Wood

I believe this was an issue with 4.2. In 4.4 we better handle the color contrast detection even with custom color palettes.

1 Like

How we can show data value in the legend. In your example 6, or 7. I would like to show data value as well as percentage value, but seem not possible.
Please advise. Thank you very much.

To get the measure totals/values in the pie char legend, it’s using a custom style that you will need to apply to the pie chart visual. Below is the custom style used and how to apply it to your pie visual.


Creating Custom Style

Custom Style Code

return function() {

var f = function() {};

f.version = "1";

f.settings = function() {
    return [
            id: 'Square Size',
            defaultValue: '15',

f.afterDraw = function() {
    var rows = arcapi.dataResult().rows();
    if (rows.length === 0) {
    var ilen = $('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').children('text').length;
    var data = rows;
    var legendlabel, pielabel, svg, c, sel;

    data.forEach(function(d, i) {
        for (c=0; c < ilen; c++ ){
            legendlabel = $('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').children('text')[c].innerHTML;

               $('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').children('text')[c].innerHTML = d[0] + ' (' + d3.format(',')(d[1]) + ')';  

return f;

i wanted the legends to be sorted as per measures not alphabetically.Can you please suggest what has to be done

@Ashwini_Shetty there’s no out of the box setting to sort the legend. You would have to use custom JS like the above example so print out the labels in the order you want and not just append the measure.

Thanx for the reply Shaun .Can u please help me where i can find codes for simple pie or donut to be included in arcadia.Im new to d3js so

@Ashwini_Shetty Here’s an example you can take a look at:

Also our online product documentation has some more info that you might find helpful to understand the integration points with our UI: