Bar chart : apply different color per serie

[Squ36]

Hi,

I'm using ExtJS 4.1.1 to develop a small chart displaying 3 informations about some tests : progress executed, progress ok, planned progress.
The first two are bar charts and the third is a scatter.

I'm using this code to create my store :

Ext.create('Ext.data.JsonStore', {
    fields: ['executed', 'ok', 'planned_x', 'planned_y'],
    data: [{
        executed   : perioddata[mstn]['executed'],
        ok         : perioddata[mstn]['ok'],
        planned_x  : perioddata[mstn]['planned'],
        planned_y  : 0
    }]
});

And this to create my chart :

Ext.define('KIWi.view.chart.CampaignChart', {
    extend   : 'Ext.chart.Chart',
    alias    : 'widget.campaignchart',
    width    : 800,
    height   : 200,
    legend   : {
        position: 'right'
    },
    //theme: 'Campaign',
    axes     : [
        {
            type: 'Numeric',
            position: 'bottom',
            fields: ['executed', 'ok', 'planned_x'],
            label : {
                renderer: function(v){
                    return v+' %';
                }
            },
            grid: true,
            minimum: 0,
            maximum: 100,
            minorTickSteps: 3
        }
    ],
    series   : [
        {
            type: 'bar',
            axis: 'bottom',
            highlight: true,
            label: {
                display: 'insideEnd',
                field: 'executed',
                renderer: function(v){
                    return 'Tests Executed : '+(Math.round(v*10)/10)+'%';
                },
                orientation: 'horizontal',
                color: '#333',
                'text-anchor': 'middle'
            },
            yField: 'executed',
            title: 'Tests KO',
            renderer: function(sprite, record, attr, index, store) {
                console.log(attr);
                return Ext.apply(attr, {
                    fill: '#E39655'
                });
            }
        },
        {
            type: 'bar',
            axis: 'bottom',
            highlight: true,
            label: {
                display: 'insideEnd',
                field: 'ok',
                renderer: function(v){
                    return 'Tests OK : '+(Math.round(v*10)/10)+'%';
                },
                orientation: 'horizontal',
                color: '#333',
                'text-anchor': 'middle'
            },
            yField: 'ok',
            title: 'Tests OK',
            renderer: function(sprite, record, attr, index, store) {
                return Ext.apply(attr, {
                    fill: '#9BBB59'
                });
            }
        },
        {
            type: 'scatter',
            axis: 'bottom',
            highlight: true,
            markerConfig: {
                type: 'diamond',
                radius: 5,
                size: 5
            },
            label: {
                display: 'none'
            },
            yField: 'planned_y',
            xField: 'planned_x',
            title: 'IMP Estimate',
            renderer: function(sprite, record, attr, index, store) {
                return Ext.apply(attr, {
                    fill: '#888888'
                });
            }
        }
    ]);

As you can see, my data has only 1 entry, with the 3 fields I need, so the 2 bars are overlapping each other. The thing is, I want each serie to be displayed in a different color (orange for executed, green for ok, and grey for planned). This is the only way i could find so it works as I want, but it doesn't seem very "clean" to me. Plus, the colors in the legend don't match those in the chart anymore.

Anyone got a better way, or any advice on this ?
Thanks,

Romain

[mitchellsimoens]

Have you tried creating your own theme or use the style attrib (not sure if that would help)