Extjs chart integer axis

Question

Can someone know how to format extjs chart axis to integer. Numeric axis gives decimal values too. I want only the integer values in axis.

@Grant Zhu : I want to draw line chart time against visits. Visits cannot be decimal(0.2... like). But when i used visit axis type as numeric lables of the axis show with decimels(1.2, 3.6... like). — Nissanka, Feb 22 '12 at 05:39
I mean more info about what version are you using and could you provide snippet of codes. — Grant Zhu, Feb 22 '12 at 05:51

yesk13 · Answer 1 · 2013-04-11T18:40:47.847

define your minimum and maximum, then add majorTickSteps with your biggest axis value on your data array minus one, so it is one less than your maxium

credit to @bittercoder on majorTickSteps comment on Sencha ExtJs 4.1.3

axes: [{
    type: 'Numeric',
    position: 'left',
    fields: ['data1', 'data2', 'data3'],
    title: 'Number of Hits',
    grid: {
        odd: {
            opacity: 1,
            fill: '#ddd',
            stroke: '#bbb',
            'stroke-width': 1
        }
    },
    minimum: 0,
    maximum: 10,
    majorTickSteps: 9 // one less than max
}, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: 'Month of the Year',
    grid: true,
    label: {
        rotate: {
            degrees: 315
        }
    }
}]

score 1 · Answer 2 · answered Apr 03 '12 at 07:12

1

In your Model, set the field types to 'int' and it will discard decimals.

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'Foo',
            type: 'int'
        },
        {
            name: 'Bar',
            type: 'int'
        }
    ]
});

answered Apr 03 '12 at 07:12

Brett

2,706
7
33
49

1

This does not work for ExtJS 4.1, the axis still renders with decimal values. – egerardus Jun 30 '12 at 20:54

score 0 · Answer 3 · answered Mar 25 '13 at 23:36

You can use the label renderer function when you define the axis to do this

axes: [{
         type: 'Numeric',
         position: 'left',
         grid: true,
         fields: ['data1', 'data2'],
         label: {
                  renderer: function (v) {
                         return v.toFixed(0); 
                         }
                }
        },
        { ... }
      ]

You can do anything you want with the axis values when you have v (v is the value of the label). In the case above .toFixed(0) rounds to the nearest integer.

score 0 · Answer 4 · answered Dec 09 '15 at 09:33

I was facing similar issue.

yAxis: new Ext.chart.NumericAxis({

      displayName: 'Visits',
      labelRenderer: function(v) {
         // return a value only if it is an integer
         if(v.toString().indexOf(".") === -1){
               return v;
         }
      }
})

This worked for me

Extjs chart integer axis

4 Answers4