ExtJS Column Chart with 2 Y axes

Question

I'm trying to plot a column chart with 2 series and thus 2 Y axis, one in the left side and the other in the right side. But the columns display in the same place, on top of each others and not side by side. Do you have any idea how to fix this ?

Something like that :

Ext.onReady(function () {
    var chart;


    chart = new Ext.chart.Chart({
        width: 800,
        height: 600,
        animate: true,
        store: store1,
        renderTo: Ext.getBody(),
        shadow: true,
        axes: [{
            type: 'Numeric',
            position: 'left',
            fields: ['data1'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Number of Hits',
            grid: true,
            minimum: 0
        }, {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Month of the Year'
        }, {
            type: 'Numeric',
            position: 'right',
            fields: ['data2'],
            title: 'Test'
        }],
        series: [{
            type: 'column',
            axis: 'left',
            highlight: true,
            xField: 'name',
            yField: 'data1'
        }, {
            type: 'column',
            axis: 'right',
            xField: 'name',
            yField: 'data2'
        }]
    });
});

Thanks

Answer 1

Create a zero value entry into the store and append it to the first and second series items. The number of additions depends on the length of series yField items of the other axes.

For example, creating two series items having yField respectively as below:

yField: ['data1', 'data2','data4']

and

yField: ['data4','data4','data3']

where data4 is a zero value entry in the store.

The solution worked perfectly. :)