EXTJS 5 chart disappears just after displaying

Question

I am trying to add a chart to a panel. However the chart disappears right after rendering (I can see it for like 1 sec). The title still remains but everything else is gone (legend included)

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'
    }
  ]
})

Then in the controller I add the pie chart to the pieContainer like this (similarly to the Kitchen Sink example)

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'))
        }
      }
    }]
  })
}

I have tried playing around with the renderTo and other things but I can't seem to figure out what is happening.