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 screenshot

Weirdly, in the fiddle it looks correct

What do I need to do to correct this issue?

first you not define that which version of extjs you are using.. but here is one link (3.4) which might be helpful for you. If you want to do in that way. tell me I'll write whole code in answer. — Shivam Pandya, Aug 26 '13 at 05:33

score 3 · Accepted Answer · answered Aug 26 '13 at 12:46

3

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

answered Aug 26 '13 at 12:46

rixo

23,815
4
63
68

Thanks for this. I actually read that not setting a minimum (or mispelling it) would mean that the minimum value on the axis defaults to the minimum data value. Clearly it doesn't – Jez D Aug 27 '13 at 07:47

Sencha charts vertical axis values

1 Answers1