Extjs 4.2.1 Stacked bar chart Minimum and maximium values changes based on store

Question

Hi i am working on a extjs 4.2.1 application in which i am using the bar chart (stacked) . In x axis i want range from -100(minimum) to maximum (100) with a difference of 20 (majorTickSteps=10).

Below is the code

var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'cost','sell'],
data: [
    {'name': "2013", 'cost': -36.483395098129556, 'sell': 25.516604901870444},
    {'name': "2013", 'cost': -27.483395098129556, 'sell': 8.516604901870444},
    {'name': "2013", 'cost': -35.483395098129556, 'sell': 19.516604901870444},
    {'name': "2013", 'cost': -25.483395098129556, 'sell': 33.516604901870444}
]

});

Ext.create('Ext.chart.Chart', {
        renderTo: Ext.getBody(),
        id:'chart',
        width: 580,
        height: 165,
        animate: true,
        store: store,
        axes: [{
            type: 'Numeric',
            position: 'bottom',
            fields: ['cost','sell'],  
            grid: true, 
            minimum: -100,
            maximum:100      
        }, {
            type: 'Category',
            position: 'left',
            fields: ['name']
        }],
        series: [{
            type: 'bar',
            axis: 'bottom',
             stacked: true,
            xField: 'name',
            yField: ['cost','sell']
        }]
    });

if stacked = true , x axis minimum and maximum values are changed based on the store
if stacked = false, x axis minimum and maximum remains same , but it is not stacked.

I need stacked bar chart with minimum and maximum values which i specified. How can i proceed . Any help would be greatly appreciated.

Towler Towler · Accepted Answer · 2013-09-26T22:47:37

This is a known issue (EXTJSIV-7844) in ExtJS. A solution is to override the processView function for your axis.

The original code looks like this (see the docs):

processView: function() {
    var me = this,
        chart = me.chart,
        series = chart.series.items,
        i, l;

    for (i = 0, l = series.length; i < l; i++) {
        if (series[i].stacked) {
            // Do not constrain stacked charts (bar, column, or area).
            delete me.minimum;
            delete me.maximum;
            me.constrain = false;
            break;
        }
    }

    if (me.constrain) {
        me.doConstrain();
    }
}

As you can see, there is code in place to intentionally prevent you from doing what you're trying to do. I'm not sure why the code is there, but a simple fix is to override the processView function such that it doesn't do that.

processView: function() {
    var me = this;

    if (me.constrain) {
        me.doConstrain();
    }
}

See this fiddle for a working example.

Extjs 4.2.1 Stacked bar chart Minimum and maximium values changes based on store

1 Answers