Sencha charts vertical axis values

Question

I need lowest value on my vertical axis to be zero. I have set minimum: 0 in my view, but it still shows the lowest value to be a figure less than zero. The lowest value in my data is 1 - there are NO values less than zero.

Here is the view:

var chartq = new Ext.chart.Chart({
      renderTo : Ext.getBody(), 
      xtype: 'chart',
      id:'demochart',
      animate: true,
        width : '80%',
        height : '60%',
        store: {
            fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
            data: [{
                'name': 'metric one',
                'data1': 10,
                'data2': 12,
                'data3': 14,
                'data4': 8,
                'data5': 13
            }, {
                'name': 'metric two',
                'data1': 7,
                'data2': 8,
                'data3': 16,
                'data4': 10,
                'data5': 3
            }, {
                'name': 'metric three',
                'data1': 5,
                'data2': 2,
                'data3': 14,
                'data4': 12,
                'data5': 7
            }, {
                'name': 'metric four',
                'data1': 2,
                'data2': 14,
                'data3': 6,
                'data4': 1,
                'data5': 23
            }, {
                'name': 'metric five',
                'data1': 27,
                'data2': 38,
                'data3': 36,
                'data4': 13,
                'data5': 33
            }]
        },
        axes: [{
            type: 'numeric',
            position: 'left',
            minumum: 0,
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: 'data1'
        }, {

            type: 'category',
            position: 'bottom',
            title: {
                text: 'Sample Values',
                fontSize: 15
            },
            fields: 'name'
        }],
        series: [{
            type: 'column',
            stacked: true,
            xField: 'name',
            yField: 'data1',
            style: {
                fill: 'blue'
            }
        }]
    });


///////////////////////////////////////////////


Ext.define('axis3.view.Main', {
extend: 'Ext.form.Panel',
requires: ['Ext.TitleBar','Ext.data.Store','Ext.chart.Chart'],
alias: 'widget.mainview',
getSlideLeftTransition: function () {
    return { type: 'slide', direction: 'left' };
},

getSlideRightTransition: function () {
    return { type: 'slide', direction: 'right' };
},
config: {
    layout: {
        type: 'fit'
    },
    items: [
    {
                xtype : 'container',
                flex: 1,
                items: [chartq]  //Ext.chart.Chart 
          },
    {
                    xtype : 'selectfield',
                    store : companiesStore2,
                    name : 'companies',
                    id : 'companiesSelect',
                    itemId: 'companySelect',
                    valueField : 'companyname',
                    displayField : 'companyname',
    },

    {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [],
            },{
        xtype: 'titlebar',
        title: 'Axis First Stats App',
        docked: 'top',


        items: [
            {
                xtype: 'button',
                text: 'Log Off',
                itemId: 'logOffButton2',
                align: 'right'
            },

        ],

    }],
    html: [
                '<div id="newContent"></div>'
            ].join(""),

    listeners: [{
          delegate: '#companySelect',
        event: 'change',
        fn: 'onGetStatsCommand'
    },{
        delegate: '#logOffButton2',
        event: 'tap',
        fn: 'onLogOffButtonTap'
    },{
        delegate: '#chartButton',
        event: 'tap',
        fn: 'onChartButtonTap'
    }]
},
onGetStatsCommand: function () {
    this.fireEvent('onGetStatsCommand', Ext.getCmp('companiesSelect').getValue());
},
onLogOffButtonTap: function () {
    this.fireEvent('onSignOffCommand');
},
onChartButtonTap: function () {
    Ext.create('axis3.view.Chart',{});
     Ext.Viewport.animateActiveItem('chartview', this.getSlideLeftTransition());
}
});

And the chart

Weirdly, in the fiddle it looks correct

What do I need to do to correct this issue?

Answer 1

You've written minumum instead of minimum in your axis config.