Extjs Gauge Change ColorSet by value

Question

Is there anyway to change the extjs gauge chart's colorset by changing value?

        var gauge = { 
        xtype: 'chart',
        style: 'background:#fff',
        animate: true,
        store: GaugeStore,
        insetPadding: 25,
        axes: [{
            title: 'Performans (%)',
            type: 'gauge',
            position: 'gauge',
            minimum: 0,
            maximum: 100,
            steps: 10,
            margin: 4

        }],
        series: [{
            type: 'gauge',
            field: 'percentagesla',
            donut: 40,
            colorSet:['',''],
            renderer: function (sprite, record, attr, index, store)
            {
                var value = record.get("percentagesla"), color;
                if (value >= 95) { this.colorSet = ['#fff000','ddd']; }
                else if (value < 85) { this.colorSet = ['#ffcc00', 'ddd']; }
                else { this.colorSet = ['#ffaa00', 'ddd']; }    
            }
        }]

    }

Renderer function does not work for setting colorset. How can i handle this problem? Thanks.

Answer 1

use this

renderer: function (sprite, record, attr, index, store) {
                if (attr.fill == this.colorSet[1]) return Ext.apply(attr, { fill: attr.fill });
                var value = record.get("SLA"),
                    color;
                if (value >= 95) {
                    color = "#0000ff";
                } else if (value < 85) {
                    color = "#00ff00";
                } else {
                    color = "#ff0000";
                }
                return Ext.apply(attr, { fill: color });
            }