[CLOSED-EXTJSIV-1765][4.0.0] Barchart with numeric axis still renders wrong

[steffenk]

see yourself:

Ext.onReady(function() {
    var myData =
            [
                ['Users_1','4'],
                ['Users_2','1'],
                ['Users_3','3']
            ];

    var store = new Ext.data.ArrayStore({
        fields: [
            {name: 'title'},
            {name: 'value'}
        ],
        data: myData
    });

    var panel_usr = Ext.create('widget.panel',
    {
        width: 580,
        height: 300,
        renderTo: Ext.getBody(),
        title: 'Users',
        layout: 'fit',
        items:
        {
            id: 'chartCmp',
            xtype: 'chart',
            animate: true,
            shadow: true,
            store: store,
            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['value'],
                    maximum: 10,
                    minimum: 0,
                    majorTickSteps: 2,
                    minorTickSteps: 1,
                    title: 'Numeric',
                    grid: true,
                    label: {
                        renderer: Ext.util.Format.numberRenderer('0')
                    }
                },
                {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['title']
                }
            ],
            series:
                    [
                        {
                            type: 'column',
                            axis: 'left',
                            label:
                            {
                                display: 'insideEnd',
                                orientation: 'vertical',
                                'text-anchor': 'middle',
                                field: 'value'
                            },
                            xField: 'title',
                            yField: 'value'
                        }
                    ]
        }
    });
}); 

[steffenk]

The point is the label renderer. Using Ext.util.Format.numberRenderer('0') you get 3 instead of 3.33, so the complete chart doesn't match with the label.

This is a dilemma, and i only see a chance in using a snap-configuration which corresponds with label renderer.

But with this setting used in the example:

maximum: 10,
minimum: 0,
majorTickSteps: 2,
inorTickSteps: 1,

I would expect steps of 2 and minor on 1:
0,2,4,6,8,10

i see/get
0,3.33,6.66,10

[philogb]

Hi, thanks for your report.

I don't see this as a bug, as you noticed the renderer is flooring the value. If you add a decimal to the current axis values you'll see everything displaying correctly.

I defined majorTickSteps to be the number of major ticks between the minimum and maximum markers in the axis. This is analogous to defining the minorTickSteps as the number of ticks between two majorTicks.

Either way this is just a convention for the configuration.

Thanks again!

[steffenk]

Hi,

I defined majorTickSteps to be the number of major ticks between the minimum and maximum markers in the axis. This is analogous to defining the minorTickSteps as the number of ticks between two majorTicks.

Either way this is just a convention for the configuration.

Thanks again!

then the naming is wrong. Steps is clearly the devision, so going from 0 to 10 in steps of 2 gives 0,2,4,6,8,10
Now it is the number of in-between lines, something different, minimum and maximum are also ticks but excluded. Hard to understand and hard to communicate imho.

[steffenk]

I discussed it with Ed at the SourceDevCon, and both ways to define the axis make sense.

majorTickSteps and minorTicksteps, from the naming is what we had before with majorUnit and minorUnit, and it makes totally sense for configuration if you know minimum and maximum, so you can exactly define the way the axis is devided, like:
minimum: 0, maximum: 0, majorTickSteps: 2, minorTicksteps: 1, which would result in axis with
0, (1), 2, (3), 4, (5), 6, (7), 8, (9), 10

The way it behave now should be renamed to a more meaningful naming, like
majorNumberOfTicks and minorNumberOfTicks (just a naming suggestion). This would be the preferred way if you don't know the maximum value and you want a fixed devision on axis.
for example:
majorNumberOfTicks:3, minorNumberOfTicks: 1
which would result with a min value of 0 and max of 800 in
0, (100), 200, (300), 400, (500), 600, (700), 800
or with min of -4 and max of +4 in
-4, (-3), -2, (-1), 0, (1) 2, (3), 4

You see what i mean?

[PranKe01]

Hi guys,

I got the problem, that I don't know the maximum number at the axis. How can I config my chart, to only use the integer values, like steffen described?

"minimum: 0, maximum: 0, majorTickSteps: 2, minorTicksteps: 1, which would result in axis with 0, (1), 2, (3), 4, (5), 6, (7), 8, (9), 10"

Does not work for me - the chart is empty because of maximum is set to 0.

Any hints?