Search code examples
extjs4

Extjs4, Chart axis Numeric display many same number?

enter image description here

On left side, there are duplicated number, I don't know why? how can make it to display only single each number? 0,1,2 and only.

and the grid show on the bar, How can I make it place behind chart?

Code

axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['inCnt'],
    label: {
        renderer: Ext.util.Format.numberRenderer('0,0')
    },
    title: 'In Transaction Qty',
    grid: true,
    minimum: 0
}, {
    type: 'Category',
    position: 'bottom',
    fields: ['month'],
    title: 'Current 12 Month'
}],

series: [{
    type: 'column',
    axis: 'left',
    highlight: true,
    tips: {
        trackMouse: true,
        width: 130,
        height: 40,
        renderer: function (storeItem, item) {
            this.setTitle(storeItem.get('inCnt') + ' transaction(s) in '+storeItem.get('month'));
        }
    },
    label: {
        display: 'insideEnd',
        'text-anchor': 'middle',
        field: 'inCnt',
        renderer: Ext.util.Format.numberRenderer('0'),
        orientation: 'vertical',
        color: '#333'
    },
    xField: 'month',
    yField: 'inCnt'
}]

JSON Data

[
    { "month" : "Nov", "inCnt" : 0 },
    { "month" : "Oct", "inCnt" : 2 },
    { "month" : "Sep", "inCnt" : 0 },
    { "month" : "Aug", "inCnt" : 0 },
    { "month" : "Jul", "inCnt" : 0 },
    { "month" : "Jun", "inCnt" : 3 },
    { "month" : "May", "inCnt" : 0 },
    { "month" : "Apr", "inCnt" : 0 },
    { "month" : "Mar", "inCnt" : 0 },
    { "month" : "Feb", "inCnt" : 0 },
    { "month" : "Jan", "inCnt" : 0 },
    { "month" : "Dec", "inCnt" : 0 }
]
Solution

  • Because you're using a renderer on the axis that truncates the decimal points, so 

    1.8
1.6
1.4
1.2

    Becomes

    1
1
1
1