Funnel Visualization Colors

edited February 15, 2017 in Questions

Hello All

I have to present graphs (shown in SS) on the same page, next to each other. Feedback I got is that stage colors are confusing, they represent one opportunity stage in one graph and different one in the other.

My question is: Is there a way to "tie" a color to a certain opportunity stage. Similar to how you can do this in SF interface (see SS2)



  • Rob HatchRob Hatch 💎💎💎
    edited September 1, 2016
    There is no declarative way to force the charts to use particular colors by stage name,  but the HiCharts API allows access to almost every aspect of the visualization - and so I imagine it would not be  a difficult snippet to update the series properties so that when stage was X - color was Y.  That Snippet would be activated as a "before render snippet" in your chart properties. 
  • edited July 24, 2015
    Thank you Rob!

  • edited February 15, 2017
    Hi Vedran - I'm looking to do this same thing.  Did you have any luck creating a snippet to set color based on the value of Stage? 
  • edited September 14, 2015
    Hi Elissa
    No I haven't. I'm really not good at all with JavaScript. 
  • Rob HatchRob Hatch 💎💎💎
    edited September 1, 2016
    Our sales guys pestered us enough until we solved this issue for them.  They wanted opportunity stages to appear in the same order and in the same colors regardless of the organization of the underlying model.  

    I created a new Javascript resource of type "In-Iine(Snippet)" called "ChartFix"

    Here is my code:
    var chartObj = arguments[0], $ = skuid.$,
    s = chartObj.series;
    ind = 0,
    //for each series item 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

    Obviously you will need to update your stage names to be appropriate with your org.   The actual colors used will need to be set up in the chart properties (Styling - Chart Colors).  

    You should be good to go. 

  • edited September 15, 2015
    Thank you very much Rob!
  • Jason CJason C ✭✭✭
    edited September 22, 2015
    I was able update the Snippet for Case status as well.

    Thanks for sharing Rob! 
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!