Bar chart columns width

Hi guys,

I have a simple fiddle which clearly explains my problem: http://ift.tt/1CAjiB9

To sum up :

I have a store that contains let's say 12 records:

Code:

var store = Ext.create('Ext.data.Store', {    fields: ['month', 'data1'],
    data: [{ month: 'Jan', data1: 20 },
           { month: 'Feb', data1: 20 },
           { month: 'Mar', data1: 19 },
           { month: 'Apr', data1: 18 },
           { month: 'May', data1: 18 },
           { month: 'Jun', data1: 17 },
           { month: 'Jul', data1: 16 },
           { month: 'Aug', data1: 16 },
           { month: 'Sep', data1: 16 },
           { month: 'Oct', data1: 16 },
           { month: 'Nov', data1: 15 },
           { month: 'Dec', data1: 15 }]
});

I have a very simple bar chart that displays the store. The chart has a width of 200px:

Code:

Ext.define('MyChart', {
    extend: 'Ext.chart.CartesianChart',
    
    renderTo: Ext.getBody(),
    width: 200,
    height: 300,
    
    store: store,
    
    axes: [{
        type: 'numeric',
        position: 'left'
    }, {
        type: 'category',
        position: 'bottom'
    }],
    
    series: {
        type: 'bar',
        axis: 'left',
        xField: 'month',
        yField: 'data1',
        label: {
            field: 'data1',
            display: 'insideEnd'
        }
    },
    
    scrollable: true
});

My problem is that I can't see all the month names at the bottom of the chart:

Capture.PNG

This is what I expected as the chart tries to render every column. But I would like to set a minimum width for each column (let's say 40) so that we can see maybe 3 of 4 bars with the name of each displayed correctly at the bottom, AND having a scrollbar that enables me to scroll to the right to see the other bars.

Thanks so much for your help guys !

Bar chart columns width