Extjs 5 Pie Chart Not Rendering Using Remote Store

I have a basic pie chart in ExtJS 5. The issue I am having is that the chart renders with a static JsonStore but won't render properly with a remote data.store? Here is my code: Vi

Solution 1:

Probably a bug in Ext.

The chart colors are set in Ext.chart.AbstractChart#updateColors. This is a "config" method, that is called automatically when setColors is called, and also from the constructor, when the config is initialized.

In your case, it is only called at construction time, before the remote store has been loaded; and it happens that polar series need to know the number of records in the store in order to know how many colors it must used (unlike other kind of charts that rely on number of axis or so).

Here's the code of that method:

updateColors: function (newColors) {
    var me = this,
        colors = newColors || (me.themeAttrs && me.themeAttrs.colors),
        colorIndex = 0, colorCount = colors.length, i,
        series = me.getSeries(),
        seriesCount = series && series.length,
        seriesItem, seriesColors, seriesColorCount;

    if (colorCount) {
        for (i = 0; i < seriesCount; i++) {
            seriesItem = series[i];

            // Ext.chart.series.Polar#themeColorCount uses store.getCount()// so seriesColorCount will be 0
            seriesColorCount = seriesItem.themeColorCount();

            // ... hence seriesColor will be an empty array
            seriesColors = me.circularCopyArray(colors, colorIndex, seriesColorCount);
            colorIndex += seriesColorCount;
            seriesItem.updateChartColors(seriesColors);
        }
    }
    me.refreshLegendStore();
}

You could probably get it working by creating the chart after the load event of the store, but that's kind of kinky given your usage is as intended, and the bug will probably get smashed in a coming release.

For now, a possible fix is to override the onRefresh of the chart, that is called, well, when the store is refreshed, and force colors to be updated at this time:

Ext.define(null, {
    override: 'Ext.chart.PolarChart'
    ,onRefresh: function() {
        this.callParent(arguments);
        var colors = this.getColors();
        if (colors) {
            this.updateColors(colors);
        }
    }
});