Funnel Visualization Colors

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. 

Thank you Rob!

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? 

Hi Elissa
No I haven’t. I’m really not good at all with JavaScript. 

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

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. 

 

Thank you very much Rob!

I was able update the Snippet for Case status as well.

Thanks for sharing Rob!