title: Changing the colorSet of a series of a Ext.chart.series.Gauge
body: <p>I'm working with extjs and I dont have a ton of experience with this framework. I have a gauge and I need to change its color after its initialized. In a perfect world, I would change this using</p>
  
  <p><code>this.myGauge.series.colorSet = ['#fff', '#ddd'];</code></p>
  
  <p>but colorSet is undefined in this situation.</p>
  
  <p>Creating a new series and assigning it to the chart like so:</p>
  
  <pre><code>this.myGauge.series.add(new Ext.chart.series.Series([{
          type: 'gauge',
          field: 'value',
          donut: 30,
          colorSet: ['#aaa', '#ddd']
       }]));
  </code></pre>
  
  <p>This throws an error when it tries to redraw the chart</p>
  
  <p><code>TypeError: series.drawSeries is not a function</code></p>
  
  <p>Even though im not explicitly calling drawSeries() anywhere.</p>
  
  <p>What is the best practice for modifying the colorSet of a gauge chart inside an event? The value of the gauge can change, and when it does, I need to update its color (hex codes are just test values).</p>
  
  <pre><code>  if (gaugeValue &gt;= 95) {
  
       //Green         
       this.typicalGauge.series.colorSet = ['#fff', '#ddd'];
  
    } else if (gaugeValue &lt; 95 &amp;&amp; gaugeValue &gt;= 85) {
  
       //Yellow
       this.typicalGauge.series.colorSet = ['#ccc', '#ddd'];
  
    } else if (gaugeValue &lt; 85) {
  
       //Red
       this.typicalGauge.series.colorSet = ['#aaa', '#ddd'];
  
    }
  </code></pre>
  
  <p>Thanks to Eric Cook I got put on the right path. What I needed to do to change the first item in the colorSet was utilize the index variable passed into the renderer function, like so:</p>
  
  <pre><code>renderer: function (sprite, record, attr, index, store) {
  
                           var value = record.get("value");
  
                           var color = null;
                           if (value &gt;= 95) {
                              color = "#1BE01B";
                           } else if (value &lt; 85) {
                              color = "#DEE817";
                           } else {
                              color = "#E81717";
                           }
                           if (index == 0) {
  
                              return Ext.apply(attr, { fill: color });
                           } else {
                              return attr;
                           }
  
                        }
  </code></pre>