Search code examples
javascriptextjschartssencha-charts

Title property breaks sencha chart


I created a sample chart with two Y axis and after I gave the series a title property, it breaks the chart. It gives the following error on the console:

Uncaught TypeError: Array.prototype.indexOf called on null or undefined

If we look at the call stack, we see that this happens in the updateTitle() function:

Error call stack

According to the documentation the series do have a title property so why does it breaks the chart?

Ext.application({
    name: 'Fiddle',

    launch: function() {
        var chart = new Ext.create('Ext.chart.CartesianChart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 500,
            legend: {
                docked: 'bottom'
            },
            "width": 740,
            "height": 440,
            "axes": [{
                "title": "Month",
                "type": "category",
                "position": "bottom",
            }, {
                "title": "Reputation",
                "type": "numeric",
                "position": "left",
            }, {
                "title": "Upvote",
                "type": "numeric",
                "position": "right",
            }],
            "series": [{
                "xField": "name",
                "yField": "data0",
                "yAxis": 1,
                "title": "Reputation gain",
                "type": "line"
            }, {
                "xField": "name",
                "yField": "data1",
                "yAxis": 2,
                "title": "Upvotes",
                "type": "line"
            }],
            "store": {
                "fields": ["name", "data0", "data1"],
                "data": [{
                    "name": "08/14",
                    "data0": 1567,
                    "data1": 2335
                }, {
                    "name": "09/14",
                    "data0": 1654,
                    "data1": 1246
                }, {
                    "name": "10/14",
                    "data0": 1777,
                    "data1": 1646
                }, {
                    "name": "11/14",
                    "data0": 2014,
                    "data1": 1456
                }, {
                    "name": "12/14",
                    "data0": 2562,
                    "data1": 2321
                }]
            }
        });
    }
});

Solution

  • You have to place the title property before the yAxis property in the series. So define your series like

    "series": [{
        "title": "Reputation gain",//Have to be placed before yAxis.
        "xField": "name",
        "yField": "data0",
        "yAxis": 1,
        "type": "line"
    }, {
        "title": "Upvotes",//Have to be placed before yAxis.
        "xField": "name",
        "yField": "data1",
        "yAxis": 2,
        "type": "line"
    }],
    

    This is a Sencha bug I already reported in the support forum. For some reason they rely on the order of the object properties and because of that the order you place the properties into the object actually matters.