График EXTJS 5 исчезает сразу после отображения

Question

Я пытаюсь добавить диаграмму на панель. Однако график исчезает сразу после рендеринга (я могу видеть его примерно за 1 секунду). Название все еще остается, но все остальное пропало (легенда включена)

Ext.define('MyProject.view.FoodDetail', {
    extend: 'Ext.panel.Panel',

  layout: {
        type: 'vbox',
        align: 'stretch'
    },

  items: [{
        flex: 1,
        xtype: 'panel',
        // width: '100%',
        height: 350,
        reference: 'pieContainer'
    }
  ]
})

Затем в контроллере я добавляю круговую диаграмму в pieContainer следующим образом (аналогично примеру с кухонной раковиной)

setPie: function (myStore) {

  var chartContainer = this.lookupReference('pieContainer')
  chartContainer.add({
    xtype: 'polar',
    height: 350,
    store: arrayStore,
    insetPadding: 50,
    innerPadding: 20,
    reference: 'foodPieChart',
    legend: {
      docked: 'bottom'
    },
    interactions: ['rotate', 'itemhighlight'],
    sprites: [
      {
        type: 'text',
        text: 'Food composition',
        font: '22px Helvetica',
        width: 100,
        height: 30,
        x: 40, // the sprite x position
        y: 20 // the sprite y position
      }
    ],
    series: [{
      type: 'pie',
      angleField: 'amount',
      label: {
        field: 'category',
        display: 'outside',
        calloutLine: {
          length: 60,
          width: 3
            // specifying 'color' is also possible here
        }
      },
      highlight: true,
      tooltip: {
        trackMouse: true,
        renderer: function (storeItem, item) {
          this.setHtml(storeItem.get('category') + ': ' + storeItem.get('amount'))
        }
      }
    }]
  })
}

Я пытался поиграть с renderTo и другими вещами, но я не могу понять, что происходит.