the x axis is slip when you have line series and column series in one chart

[leon_tang]

Hi:

I created a very simple page. if you run it, everything is fine.
ChartWithNoProblem.png
The js file is below:

var store = Ext.create('Ext.data.JsonStore', {
     fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
     data: [
         {'data1':100, 'data2':12, 'data3':0, 'data4':0, 'data5':13},
         {'data1':103, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
         {'data1':105, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
         {'data1':110, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
         {'data1':115, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
         {'data1':120, 'data2':14, 'data3':10, 'data4':0, 'data5':23},
         {'data1':125, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
         {'data1':128, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
         {'data1':130, 'data2':38, 'data3':0, 'data4':0, 'data5':33}
     ]
});


Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    store: store,
    axes: [{
        type: 'Numeric',
        grid: true,
        position: 'left',
        fields: ['data2', 'data3', 'data4', 'data5'],
        title: 'Sample Values',
        grid: {
            odd: {
                opacity: 1,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 1
            }
        },
        minimum: 0,
        adjustMinimumByMajorUnit: 0
    }, {
        type: 'Numeric',
        position: 'bottom',
        fields: ['data1'],
        grid: true,
        label: {
            rotate: {
                degrees: 315
            }
        },
        minimum: 100,
        adjustMinimumByMajorUnit: false,
        majorTickSteps: 5,
        
        decimals: false
    }],
    series: [{
        type: 'line',
        highlight: false,
        axis: 'left',
        xField: 'data1',
        yField: 'data2',
        smooth: true,
        showMarkers: false
    }]
});

but if you add a series of "column" in the page the start point of x axis is slip on the right, also the line chart is slip as well. The weird thing is the column didn't slip so the position of the line or column is not correct.
ChartWithProblem.png

var store = Ext.create('Ext.data.JsonStore', {
     fields: ['data1', 'data2', 'data3', 'data4', 'data5'],
     data: [
         {'data1':100, 'data2':12, 'data3':0, 'data4':0, 'data5':13},
         {'data1':103, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
         {'data1':105, 'data2':8, 'data3':0, 'data4':0, 'data5':3},
         {'data1':110, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
         {'data1':115, 'data2':2, 'data3':0, 'data4':0, 'data5':7},
         {'data1':120, 'data2':14, 'data3':10, 'data4':0, 'data5':23},
         {'data1':125, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
         {'data1':128, 'data2':14, 'data3':0, 'data4':0, 'data5':23},
         {'data1':130, 'data2':38, 'data3':0, 'data4':0, 'data5':33}
     ]
});


Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    store: store,
    axes: [{
        type: 'Numeric',
        grid: true,
        position: 'left',
        fields: ['data2', 'data3', 'data4', 'data5'],
        title: 'Sample Values',
        grid: {
            odd: {
                opacity: 1,
                fill: '#ddd',
                stroke: '#bbb',
                'stroke-width': 1
            }
        },
        minimum: 0,
        adjustMinimumByMajorUnit: 0
    }, {
        type: 'Numeric',
        position: 'bottom',
        fields: ['data1'],
        grid: true,
        label: {
            rotate: {
                degrees: 315
            }
        },
        minimum: 100,
        adjustMinimumByMajorUnit: false,
        majorTickSteps: 5,
        
        decimals: false
    }],
    series: [{
        type: 'line',
        highlight: false,
        axis: 'left',
        xField: 'data1',
        yField: 'data2',
        smooth: true,
        showMarkers: false
    },{
        type: 'column',
        axis: ['left'],
        xField: 'data1',
        yField: 'data3',
        style: { 'width': 5},
        tips: {
                trackMouse: true,
                width: 140,
                height: 28,
                renderer: function (storeItem, item) {
                    this.setTitle(storeItem.get('data1'));
                }
        }
    }]
});

I am using Ext JS 4.1. Could you know how to solved it? I attached the screen shoot for you, hope this may help.
Thank you very much.