Conditional Formatting of Columns: Custom Conditional Color/Gradient

Hi Shaun,

I want to implement value or range based gradient for a particular column or multiple columns.


Methods I have tried:

  1. Custom Color : Gradient with Value.
    I am not able to apply or Custom color to a particular column or multiple columns of the table.

  2. Used inline css:

.test3 .dataTables_scrollBody tbody tr :nth-child(4) {
   Color: Black;
   background: linear-gradient(to bottom, #19b5ee 0%,#15a9e4 20%,#0a65bb 
 75%,#0a457d 100%)
.test3 .dataTables_scrollBody thead tr :nth-child(4) {
   Color: Black;
.test3 .dataTables_scrollHead thead tr :nth-child(4) {
   Color: Black;
   font-weight: bold;
   background: linear-gradient(to bottom, #19b5ee 0%,#15a9e4 20%,#0a65bb 
 75%,#0a457d 100%)
  1. Custom Style Code: Not able to apply conditional color formatting for id: color

@rawadhwal right now we do not have an out of the box feature to specify a color gradient for a table column.

You will have to use custom style in particular javascript. Below is an example of custom style you can use. You will have specify at least the column name you want in the setting of the custom style as shown here:

Custom Style – JS

return function() {

var f = function() {};

f.version = "1";

f.settings = function() {
    return [
            id: 'Column name',
            defaultValue: 'Scan Exempt Reason'
            id: 'Color',
            defaultValue: '0,193,178'

f.afterDraw = function() {
    // Obtain the settings specified by the user
    var colname = arcapi.getSetting('Column name');
    var c_color = arcapi.getSetting('Color');

    var colIndex = arcapi.dataResult().columnNameToIndex(colname);
    if (colIndex === undefined) {
        console.log('Unknown columnForLabel for the table-bar extension');
    //Arcadia API to get result set and use to manipulate visual
    var d = arcapi.dataResult();
    var rows = d.rows();
    if (rows.length === 0) {
   var extent = d3.extent(rows, function(row) {
       return Number(row[colIndex]);
    // map the range of column values to 1 to 250 color range
     var scale = d3.scale.linear()
       .range([1, 250]);  //.range([0.1, 1]);
    function heatColm(colIndex) {
        var heat = d3.selectAll("#" + arcapi.chartId() + " .dataTables_scrollBody tbody tr :nth-child(" + (colIndex+1) +")");
        // Apply custom color background"border", "white")
             .style("background-color", function(d, i) {
                   var m = Number(rows[i][colIndex]);
                   var w = scale(m);
                   return "rgb(245,"+Number(w)+",100)";  //return "rgba(0,190,"+c_color+","+ w + ")";



return f;

This is great!! I have an additional question how can you apply it to multiple columns at once and not just one? also for some reason it is not considering the rgb provided so have to change it directly on the code

@Carlos_Bocanegra you can apply the custom style multiple times, once for each column and configure it accordingly to use the column you want.

Here I have applied the custom style twice and configured it to use β€œsales” in the first one and β€œcost” in the second.

1 Like

thanks that works!! additionally is there any way to apply it automatically at once to all numeric columns?

@Carlos_Bocanegra currently no automatic way to apply to all numeric columns.

Could you advise if our threshold is dynamic so color could be changed accordingly.
E.g. Highlight Green if sales > X but X can be anything from text box input,
and Highlight Orange if sales between X/10 and X

Pleas suggest.
Thank you very much.