Have certain colors represent certain values in charts

  • 2
  • Question
  • Updated 1 year ago
  • Answered
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!
Photo of Megan Minahan

Megan Minahan

  • 716 Points 500 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Matt Sones

Matt Sones, Champion

  • 33,040 Points 20k badge 2x thumb
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): https://community.skuid.com/skuid/topics/superbank-chart-options-data-preprocess
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 45,308 Points 20k badge 2x thumb
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(s.id) {        
        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
Photo of Matt Leedham

Matt Leedham

  • 224 Points 100 badge 2x thumb
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(d.name) {
    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;
Photo of Sean Dowd

Sean Dowd, Employee

  • 146 Points 100 badge 2x thumb
Thanks, Matt!!
Photo of Arne-Per Heurberg

Arne-Per Heurberg

  • 3,598 Points 3k badge 2x thumb
Ditto. Thanks Matt i needed that
Photo of Brayden Smith

Brayden Smith

  • 1,290 Points 1k badge 2x thumb
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?