Have certain colors represent certain values in charts

Megan MinahanMegan Minahan Member
edited May 2019 in Questions
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!


  • Matt SonesMatt Sones Member ✭✭
    edited February 2017
    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
  • Rob HatchRob Hatch Skuad, Sonar ✭✭
    edited May 2019
    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
  • Brayden SmithBrayden Smith Member ✭✭
    edited July 2017
    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?
  • Matt LeedhamMatt Leedham Member
    edited May 2019
    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;
  • Sean DowdSean Dowd Skuad ✭✭
    edited May 2019
    Thanks, Matt!!
  • Arne-Per HeurbergArne-Per Heurberg Member ✭✭
    edited May 2019
    Ditto. Thanks Matt i needed that
Sign In or Register to comment.