Chart fails to render when included in a Dashboard

Code:

Ext.define('SpendingPortal.view.SponsorChart', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.sponsorchart',


    requires: [
        'Ext.chart.Chart',
        'Ext.chart.series.Bar',
        'Ext.chart.axis.Category',
        'Ext.chart.axis.Numeric',
        'Ext.chart.interactions.ItemHighlight'
    ],


    autoShow: true,
    height: 320,
    width: 501,
    constrain: true,
    layout: {
        type: 'fit'
    },
    title: 'Compare Expenditures',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [{
                xtype: 'cartesian',
                insetPadding: 20,
                store: 'ChartData',
                insetPadding: {
                    top: 40,
                    bottom: 40,
                    left: 20,
                    right: 40
                },
                interactions: 'itemhighlight',
                axes: [


                    {
                        type: 'numeric',
                        position: 'left',


                        title: 'Expenditures',
                        listeners: {
                            rangechange: function(range) {
                                var store = this.getChart().getStore(),
                                    min = Infinity,
                                    max = -Infinity,
                                    value;


                                store.each(function(rec) {
                                    var value = rec.get('value');
                                    if (value > max) {
                                        max = value;
                                    }
                                    if (value < min) {
                                        min = value;
                                    }
                                });


                                value = (min + max) / 2;
                                this.setLimits({
                                    value: value,
                                    line: {
                                        title: {
                                            text: 'Average Spending: $' + (value / 1000).toFixed() + 'K'
                                        },
                                        lineDash: [2, 2]
                                    }
                                });
                            }
                        }


                    }, {
                        type: 'category',
                        title: 'Elected Representative',
                        position: 'bottom'
                    }
                ],
                series: [{
                    type: 'bar',
                    axis: 'left',
                    xField: 'label',
                    yField: 'value',
                    style: {
                        minGapWidth: 20
                    },
                    highlightCfg: {
                        strokeStyle: 'black',
                        fillStyle: '#c1e30d',
                        lineDash: [5, 3]
                    },
                    label: {
                        field: 'high',
                        display: 'insideEnd',
                        renderer: function(value) {
                            return value.toFixed(1);
                        }
                    }
                }],
                items: {
                    type: 'text',
                    text: 'Spending by Reps',
                    font: '22px Helvetica',
                    width: 100,
                    height: 30,
                    x: 40, // the sprite x position
                    y: 20 // the sprite y position
                }
            }]
        });


        me.callParent(arguments);
    }


});