View Full Version : [FIXED]Legend is empty in Pie chart

18 Feb 2011, 10:07 AM
When using a Pie chart with a proxy data store, the legend is not rendered properly after the data store retrieves the data. This is because there is some code in the constructor of Ext.chart.series.Pie which is not run when the chart receives the "datachange" event from the store. Specifically, this code:

//Add yFields to be used in Legend.js
if (me.label.field && !me.yField) {
me.yField = [];
store.each(function(rec) {

Because the store has not been fully loaded when the component is constructed, the "yField" array is empty. When the legend is refreshed as part of redrawing the chart, the empty fields prevent the legend from creating the appropriate items. I was able to work around this by creating the pie chart component with "legend: false", and then setting up the legend when the data store is loaded.

store.load(function(records, operation, success) {
if (success) {
console.log('Loaded pie chart data');

// There's a bug in Ext.chart.Pie that causes the Legend to not be rebuilt correctly
// when using an async data store. So we need to build it by hand after we got the data.
var chart = panel.items.getAt(0).items.getAt(0);

chart.legend = new Ext.chart.Legend({
chart: chart,
position: 'bottom'

var fieldNames = [];
store.each(function(rec) {
chart.series.getAt(0).yField = fieldNames;


I can post the full source if that would help.


Jamie Avins
18 Feb 2011, 4:24 PM
Thank you for the report, we'll get that fixed.

19 Dec 2012, 4:08 AM
Is this really fixed? I'm seeing the same thing...

Will try the suggested workaround for now.

19 Dec 2012, 4:13 AM
Yeah, workaround sorts it for me... thanks!