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.

[scottmartin]

What I see here is that when you added the column, it created a left and right margin to account for the 0 in the column chart data and also created a margin on the right, even though the data maxed at 130 .. basically sqeezing the chart, but the aspect of the line chart is still correct.

If the margin on the right was omitted, then it would be correct?

Did I miss something?

Regards,
Scott.

[leon_tang]

Hi Scott:

Omitting the right margin will make the column in the same position of line chart. Which will be fine.

How about the left margin? It still make a gap between 0 and 100 in x axis. Can we remove both margins?

Thank you

PS: I removed the duplicate post in other section. Sorry about it

[leon_tang]

Hi Scott:

Any update about this issue?
Thank you

Tom

[scottmartin]

I have classified this as a bug and it will be reviewed soon. See ID at top for tracking reference.

Scott.

[leon_tang]

oh sorry Scott, I didn't notice that.
Thank you for your update