Have certain colors represent certain values in charts

Badge +3

I am trying to put together some donut charts where the the aggregation is count and the split field is a  custom field, health score label. 

These values and colors are what I am hoping to achieve

  • At risk= red

  • Poor= pink

  • Average= Orange

  • Good: light green

  • Champion: Dark green

I am wondering if there is a way to make sure in all of my charts the different values stay the same color across, as some charts may not include all of the values? Thank you!

This topic has been closed for comments

5 replies

Badge +18

Megan, you will probably have to run a before-render snippet for your charts. It can probably be the same snippet for all the charts. 

Check out the Highcharts API
And this thread (among many others with examples):

Badge +17

Megan.  Here is a before render snippet I use to force bar charts into a particular order and color.  (The color is determined in the style tab of the chart properties)    Be warned that the donut charts are different and I haven’t been able to get this to work for that type.  Dang…

var chartObj = arguments[0],
	$ = skuid.$,
	s = chartObj.series;
	ind = 0,
//for each series entry grab series id.  Based on id value set ind variable. 
    $.each(s, function (i, s){	
        switch( {        
        case "Prospecting": ind = 0; break;
        case "Qualification": ind = 1; break;
        case "Needs Analysis": ind = 2; break;
        case "Value Proposition": ind = 3; break;
        case "Id. Decision Makers": ind = 4; break;
        case "Perception Analysis": ind = 5; break;
        case "Proposal/Price Quote": ind = 6; break;
        case "Negotiation/Review": ind = 7; break;
        case "Invoice": ind = 8;  break;
        case "Closed Won": ind = 9;  break;
        case "Closed Lost": ind = 10; break;
        default: ind = 10; 
// update series index number and color index with ind variable. 
        $.extend(true, chartObj.series[i],{
            index: ind,
            _colorIndex: ind

Badge +8

I’ve tried this as a before render snippet on a column chart, but can’t get it to work. Any tips to get this to work?

Badge +2

In case it is useful, here is a snippet approach that seems to work for a donut/pie chart:

var chartObj = arguments[0],
$ = skuid.$,
d = chartObj.series[0].data,
c = '';
colors = [];
//for each data item in the first series, //use the name value to set color (c) variable.
$.each(d, function (i,d){ 
    switch( {
        case "Under Contract": c = '#ff4550'; break;
        case "Underwriting/Offer Pending": c = '#ff941e'; break;
        case "Tracking - A": c = '#085dcc'; break;
        case "Tracking - B": c = '#8abdff'; break;
        case "Tracking - C": c = '#bcebd2'; break;
        case "Closed": c = '#3cce7f'; break;
        case "Offer Not Accepted": c = '#8273fa'; break;
        case "Passed On": c = '#6458bf'; break;
        case "Under Contract w/ 3rd Party": c = '#acacac'; break;
        case "Other": c = '#5f5d5d'; break;   
        default: c = '#5f5d5d';
  //add selected color to array.
//replace the chart colors array
chartObj.colors = colors;
Badge +8

Ditto. Thanks Matt i needed that