REQUIRED INFORMATION
Ext version tested:
  • Ext 4.1.1
Browser versions tested against:
  • FF
DOCTYPE tested against:
  • <!DOCTYPE HTML>
Description:
  • When a chart data has negative values the Numeric axes minimum is not calculated correctly whick results in incorrect Axis range (minimum is always 0)
Steps to reproduce the problem:
  • Run the test case
The result that was expected: The result that occurs instead: Test Case:
Code:
    Ext.require('Ext.chart.*');
        Ext.require(['Ext.layout.container.Fit', 'Ext.window.MessageBox']);

        Ext.onReady(function () {
            var store = Ext.create('Ext.data.JsonStore', {
                fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
                data: [
                    {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
                    {year: 2006, comedy: -56703000, action: -38900000, drama: -12650000, thriller: -21000000},
                    {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
                    {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
                ]
            });

            chart = Ext.create('Ext.chart.Chart',{
                xtype: 'chart',
                animate: true,
                shadow: true,
                store: store,
                legend: {
                    position: 'right'
                },
                axes: [{
                    type: 'Numeric',
                    position: 'bottom',
                    fields: ['comedy', 'action', 'drama', 'thriller'],
                    title: false,
                    grid: true,
                    label: {
                        renderer: function(v) {
                            return String(v).replace(/(.)00000$/, '.$1M');
                        }
                    }
                }, {
                    type: 'Category',
                    position: 'left',
                    fields: ['year'],
                    title: false
                }],
                series: [{
                    type: 'bar',
                    axis: 'bottom',
                    gutter: 80,
                    xField: 'year',
                    yField: ['comedy', 'action', 'drama', 'thriller'],
                    stacked: true,
                    tips: {
                        trackMouse: true,
                        width: 65,
                        height: 28,
                        renderer: function(storeItem, item) {
                            this.setTitle(String(item.value[1] / 1000000) + 'M');
                        }
                    }
                }]
            });


            var panel1 = Ext.create('widget.panel', {
                width: 800,
                height: 400,
                title: 'Stacked Bar Chart - Movies by Genre',
                renderTo: Ext.getBody(),
                layout: 'fit',
                tbar: [{
                    text: 'Save Chart',
                    handler: function() {
                        Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
                            if(choice == 'yes'){
                                chart.save({
                                    type: 'image/png'
                                });
                            }
                        });
                    }
                }],
                items: chart
            });
        });
HELPFUL INFORMATION
Screenshot or Video:
  • attached
See this URL for live test case: http:// Debugging already done:
  • none
Possible fix:
  • It seems that the Ext.chart.axis.Axis.getRange() does not set the minimum.
Additional CSS used:
  • only default ext-all.css
  • custom css (include details)
Operating System:
  • Win7