Stack Bar chart render issues

[link41489]

I'm having an issue when my data returns 0's for my fields. A quick example of this is looking at the Extjs sample Stacked bar chart.

http://docs.sencha.com/ext-js/4-0/#!...tackedBar.html

In the Extjs example, the fields "comedy" , "action", "drama" and "thriller" all have a value larger than 0. The sample works as expected. But if you change the values for those fields to be 0, this error is thrown.

"Error: Invalid value <rect> attribute x="Nan""

You can easily test this by inserting this into the console.

    var store = Ext.create('Ext.data.JsonStore', {        fields: ['year', 'comedy', 'action', 'drama', 'thriller'],        data: [                {year: 2005, comedy: 0, action: 0, drama: 0, thriller: 0},                {year: 2006, comedy: 0, action: 0, drama: 0, thriller: 0},                {year: 2007, comedy: 0, action: 0, drama: 0, thriller: 0},                {year: 2008, comedy: 0, action: 0, drama: 0, thriller: 0}              ]    });    var panel1 = Ext.create('widget.panel', {        width: 800,        height: 400,        title: 'Stacked Bar Chart - Movies by Genre',        renderTo: Ext.getBody(),        layout: 'fit',        items: {            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(/000000$/, 'M');                    }                },                roundToDecimal: false            }, {                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');                    }                }            }]        }    });

You can see that the error gets thrown. But if you give the fields "comedy", "action", "thriller" and "drama" a value greater than 0, there is no error message.

Is this a bug with stacked bar charts?

If anyone can shed some light on this, it would be much appreciated. I've spent hours trying to figure out why this is the case when the values are 0.

[mitchellsimoens]

What Ext JS 4.x.x version are you using?

[link41489]

We are using 4.1.0.

I did find an alternative solution to my problem but I can't say for sure if its the most ideal. The problem with how the chart is render is due to the calculations being done for the bounds of the axis. I'm not sure why this certain scenario is not handled for a stacked bar chart, but the bounds are returning "NaN" for the "to" and "from" property of the bounds object. What I ended up doing was forcing the bounds be calculated if the initial calculation resulted in non-numeric value. This solved my issue.


Ext.override(Ext.chart.axis.Axis, {

/**
* Verbatim copy from Ext 4.0 to add support for Stacked Bar Graph rendering issue.
*/
calcEnds: function () {
var me = this,
fields = me.fields,
range = me.getRange(),
min = range.min,
max = range.max,
seriesConfig = me.chart.series.items[0],
outfrom, outto, out;


out = Ext.draw.Draw.snapEnds(min, max, me.majorTickSteps !== false ? (me.majorTickSteps + 1) : me.steps, (me.majorTickSteps === false));

// OVERRIDE starts here
// The Actual Overrride when using Stacked Bar Chart.
// This resolves rendering issues happening when using a Stacked
// Bar chart. Normally, Extjs does not draw the axis if the store's value
// which is use to populate the stacked bars are all zeros. This makes the graph look
// very ugly as components that are part the axis ie. labels are rendered without
// the axis. This was the simpiliest approach to resolve the issue by forcing Extjs
// to recalculate the ends.
if (seriesConfig.type === 'bar' &&
seriesConfig.stacked && (!Ext.isNumeric(out.from) || !Ext.isNumeric(out.to))) {

// Manually recalculate the ends again since the initial
// calculation resulted in NaN values. This causes an issue when using
// a stacked bar graph that results in a distorted graph. Normally,
// the axis are not drawn if there is no need for it base on the values
// on the store. This results in a very ulgy looking graph. Because of this,
// we force the chart to render the axis by using a set of arbitrary values.
//
// function snapEnds(from, to, stepsMax, prettyNumbers)
// @param from The min starting value for the bottom axis
// @param to The max starting value for the bottom axis
// @param stepsMax The number of steps
// @param prettyNumbers Boolean to indicate to show nice numbers
out = Ext.draw.Draw.snapEnds(0, 200, 10, true);
}
// OVERRIDE ends here
........

[ingo.hefti]

I'm experiencing the same issues on 2 bar charts with V4.1.3. I noticed it in the production version (minified) not in the testing version when changing the size of the panel which holds the 2 bar charts.

extbarchartissues.png

[noiks]

Did you get to the solution for this? I am trying to render a barchart inside a grid cell and am getting the same error.

[elcooleperco]

Did you get to the solution for this? i have same problem...

[riico]

The problem persists also for me. I'using the minified version.
Has nobody found the solution?
Thanks.

[andrevio]

One solution is to manually specify minimum and maximum values for the axes.