Conditional formating a series

Dashboard Designer SharePoint 2013/2016, Office 365 versions
1

Hi,

i'm trying to conditional color format a series. Every Value over 125 should be green, otherwise red.
when applying this code:
$.each(config.series[2].data, function(i){ if (i >= 125) { this.color = 'green'; } else { this.color = 'red'; } });

it just color code by the item number not the value. the first 125 items are red and the rest is green.
When setting config.series[2].data.Value it doesn't work.

2

Hello @xosal,

What chart type are you using? Do you use aggregation? Please share the screenshot of the chart.

3

image
image2668×848 175 KB

Culumn chart.
No, i'm not using aggregations. just 3 series

Here the advanced tab:

var handlers = {};
handlers.preRender = function(config, logger) {
  logger.debug('Configuration: ', config);
  config.categoryAxis.labels.rotation = -45;
  
  
      config.series[0].color = '#FF8233';
      config.series[1].color = '#33FFEF';  
   $.each(config.series[2].data, function(i){ if (i <= 125) { this.color = 'green'; } else { this.color = 'red'; } }); 
   
   
  return true;
}
4

@xosal,

You can test this code for changing the color of a column for each series depending on the data:

var handlers = {};
handlers.preRender = function(config, logger) {
  config.chartArea = {};
  config.categoryAxis.labels = {
    rotation: -45
  };
  config.series.forEach(function(item) {
    item.data.forEach(function(i) {
      //replace ColumnName with the valid
     //internal name of the column 
      if(i.ColumnName <= 125) {
        //set color to green
        i.color = '#00aa00';
      } else {
        //set color to red otherwise
        i.color = '#aa0000';
      }
      return true;
    });
  });
}
5

Hi @xosal thanks, but this will color code every series. I just want to color code only the series[2].

6

@xosal,

You can update the code as you need. If you want to apply formatting only for one series update the code like so:

var handlers = {};
handlers.preRender = function(config, logger) {
  config.chartArea = {};
  config.categoryAxis.labels = {
    rotation: -45
  };
  config.series[2].data.forEach(function(i) {
      //replace ColumnName with the valid
     //internal name of the column 
      if(i.ColumnName <= 125) {
        //set color to green
        i.color = '#00aa00';
      } else {
        //set color to red otherwise
        i.color = '#aa0000';
      }
      return true;
    });
}
7

Thank you, that worked!