[Bug ExtJS 4.x Charts - Numeric Axis]

[uzer]

REQUIRED INFORMATION Ext version tested:

• Ext 4.0.2

Browser versions tested against:

• ____
• IE9
• FF4.0, FF 5.0 (firebug installed)
• Chrome 12.0.742.100

Description:

• There is overlap of the top and second largest labels on a vertical axis when numeric values are automatically calculated. The Top value is being aligned by the top of the text while the remaining labels are aligned by the vertical center of the text, so depending on the number of major tics
  generated and the overall height of the chart, this problem occurs intermittently.

Steps to reproduce the problem:

• create a chart with a numeric axis
• do not set max manually

The result that was expected:

• Axis labels do not overlap (at the top)

The result that occurs instead:

• overlap

Test Case:

    axes: [{
                    type: 'Numeric',
                    position: 'left',
                    fields: ['sales'],
                    minimum: 0,
                    title: 'Sales $',
                    grid: {
                        odd: {
                            stroke: '#d3d3d3'
                        },
                        even: {
                            stroke: '#d3d3d3'
                        }
                    }
                }, {
                    type: 'Category',
                    position: 'bottom',
                    fields: ['Server'],
                    title: 'Server',
                    label: {
                           rotate: {
                                   degrees: -90                            
                           } 
                    }   
                }],
                series: [{
                    type: 'column',
                    axis: 'left',
                    highlight: true,
                    label: {
                      display: 'insideEnd',
                      'text-anchor': 'middle',
                        field: 'sales',
                        orientation: 'vertical',
                        fill: '#eee',
                        font: '10px Arial'
                    },
                    renderer: function(sprite, storeItem, barAttr, i, store) {
                        barAttr.fill = colors[i % colors.length];
                        return barAttr;
                    },
                    style: {
                        opacity: 0.95
                    },
                    xField: 'Server',
                    yField: 'sales'
                }]

HELPFUL INFORMATION Screenshot or Video:

• senchaBugAxis.jpg

Possible fix:

• problem addressed and fixed in extJS 3.x

Operating System:

• Windows 7

[mike.estes]

@uzer, thanks for the report and for using the template format. Could you expand your test case to be complete and easily runnable? We use these test cases directly in the process of confirming a bug and when confirming the fix for the bug, it is important that the test case be as close as possible to actual usage. In this case your example should include the chart and store configuration with local data. Thanks in advance!

[cfrerebeau]

I have exactly the same issue and it's happening on both vertical and horizontal Numeric Axis. It happen for me with any data set I used. I am using 4.02

Ext.define('chartModel', {
    extend: 'Ext.data.Model',
    fields: ['key', 'count']
});

 var chartStore = Ext.create('Ext.data.Store',
            {
                model: 'chartModel',
                data: [{key:1,count:400},
                          {key:2,count:1500},
                          {key:3,count:2}]
            });


        this.chart = Ext.create('Ext.chart.Chart', {
            renderTo: "div-id",
            width: 220,
            height: 100,
            theme:"Blue",
            store: chartStore,
            animate:true,
            axes: [
                {
                    type: 'Numeric',
                    position: 'left',
                    fields: ['count'],
                    minimum: 0,
                    label: {
                        font: '10px Arial'
                    }
                },
                {
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['key'],
                    label: {
                        font: '10px Arial'
                    }
                }
            ],
            series: [
                {
                    type: 'area',
                    xField: 'key',
                    yField: 'count',
                    showMarkers :false
                }
            ]
        });

[uzer]

cfrerebeau is exactly right. The data points aren't as important as what Ext chooses for the maximum on the axis, the number of major tics, and the height for the vertical axis... For me, a maximum of 2000 yields labeled tic marks for 200, 400, 600, 800, ... , 1800, and 2000. For the allowed height, there was no overlap for the calculated tic marks, with exception of 1800 and 2000.

I did see while researching a potential workaround that the same bug was identified and fixed in Ext 3.x... Perhaps that would be a useful reference. What is happening is that the alignment for the maximum label is not based on the vertical centerline, but instead the label 'top' is aligned with the tic mark... thus the overlap.

[uzer]

Any data store will work.... my example is running off of live data, but you can easily reproduce this bug with your randomly generated data points. It is unreasonable for you to flag this post as not containing enough information.

Please remove the flag.

[uzer]

Mike, please remove the flag on this bug request, as the data points are not central to replicating the bug, nor necessary to address it. Use any data store available. This bug occurs on 3/5 data sets i pass it.

[cfrerebeau]

On my end, I figured out that one of the stylesheet was not up-to-date and that's why I was getting the issue. Once Ext js style were applied correctly the issue never happened again.

[uzer]

Sencha updates to style source? I believe I have the latest version... What did you have to do to apply the style 'correctly?'

When working correctly, does the label for the axis max align differently, does it not appear at all, does Ext adjust the number of major tics, or does the tic label immediately below the maximum label disappear?

[arthurakay]

I just stumbled across this thread... apologies that it has not been added to our bug tracker yet. I will try to escalate this issue.

In testing myself (for all of 2 minutes), I used the following code to reproduce the case in 4.0.7:

Ext.onReady(function(){
    Ext.define('chartModel', {
        extend : 'Ext.data.Model',
        fields : ['key', 'count']
    });

     var chartStore = Ext.create('Ext.data.Store', {
        model: 'chartModel',
        data: [
            {key : 1, count : 400  },
            {key : 2, count : 1500 },
            {key : 3, count : 2    }
        ]
    });

    var chart = Ext.create('Ext.chart.Chart', {
        renderTo : document.body,
        width    : 600,
        height   : 300,
        theme    : "Blue",
        store    : chartStore,
        animate  : true,
        axes: [
            {
                type     : 'Numeric',
                position : 'left',
                fields   : ['count'],
                minimum  : 0,
                label    : {
                    font : '10px Arial'
                }
            },
            {
                type     : 'Numeric',
                position : 'bottom',
                fields   : ['key'],
                label    : {
                    font : '10px Arial'
                }
            }
        ],
        series: [
            {
                type        : 'area',
                xField      : 'key',
                yField      : 'count',
                showMarkers : false
            }
        ]
    });
}); 

Inspecting the DOM in Chrome, I see that the top y-axis label looks like this:

<text id="ext-sprite-1031" style="font: normal normal normal 10px/normal Arial; " zIndex="0" x="8" y="16" text="1600" fill="#444" font="10px Arial" text-anchor="start" transform="matrix(1,0,0,1,0,0)" hidden="false">
    <tspan x="8" dy="3.25">1600</tspan>
</text> 

Changing the "y" attribute from "16" to "12" manually fixes the issue - but I don't know how that fix needs to be applied within the framework. I will notify the appropriate people.

[arthurakay]

Doing a bit more research, I think the issue may stem from the calculations in Ext.chart.axis.Axis() - the drawVerticalLabels() method.

In the block:

if (gutterY < bbox.height / 2) { ... } 

This section appears to calculate the Y value for the final (top) label. I don't know if I have enough experience in the charting package to suggest a fix, but this is where I'm focused for the time being.