Set the background color of a table cell based on the data contained in the row or cell


We have a set of columns that can either be “red” or “green” if the data is within a certain range or not. So we would like to color in the background of the cells based on data.

In datatables, this functionality is achieved using rowCallback and adding a css class to the cell, then the css class contains the color modification.

How can this be achieved in c3 ui?



Found out something on the row that might help, but still need one that is per column.

rowColorConditionals : Object
The conditions for coloring rows successful matching of a row-color conditional will override any column-color conditionals @example { field: ‘plan.status.value’, thresholds: [ { comparator: ‘==’, comparisonValue: ‘success’, conditionalValue: ‘gray’ } ] }

I cant seem to find column-color conditionals in the docs though.



In ui/content/js/customCode/anyFileName.js, add the code for a function as below:

(function() {
    var helpers = C3.script.helpers;
    _.extend(helpers, {
        doSomeFunc: function(status) {
            return "<div class='myCSSClass'>1.0</div>";

In the kendo grid column, specify a format attribute with value

"format": {
                 "funk": "doSomeFunc"

This will add a div with styling defined by myCSSClass

Which can be defined with a background color and other styling if desired:

  border-bottom: 3px solid white !important;
  background-color: #DCEDC8 !important;
  color: black !important;

closed #4