Results 1 to 8 of 8

Thread: Stack Bar chart render issues

  1. #1
    Sencha User
    Join Date
    Nov 2011

    Default Stack Bar chart render issues

    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.!...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('', {        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.
    Last edited by link41489; 11 Jan 2013 at 6:50 AM. Reason: Fixing formatting of code snippet

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    What Ext JS 4.x.x version are you using?
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Nov 2011


    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( {

    // 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

  4. #4
    Sencha Premium User
    Join Date
    Feb 2012
    Berne, Switzerland


    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.


  5. #5
    Sencha User
    Join Date
    Jul 2011


    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.

  6. #6


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

  7. #7
    Sencha User
    Join Date
    Jun 2012


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

  8. #8
    Sencha User
    Join Date
    Dec 2011


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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts