Sencha Chart not showing in view - extjs

Question

At the top of my view, I have defined the following variable:
var chartq = new Ext.chart.Chart({
renderTo : Ext.getBody(),
xtype: 'chart',
animate: true,
width : 400,
height : 300,
store: {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [{
'name': 'metric one',
'data1': 10,
'data2': 12,
'data3': 14,
'data4': 8,
'data5': 13
}, {
'name': 'metric two',
'data1': 7,
'data2': 8,
'data3': 16,
'data4': 10,
'data5': 3
}, {
'name': 'metric three',
'data1': 5,
'data2': 2,
'data3': 14,
'data4': 12,
'data5': 7
}, {
'name': 'metric four',
'data1': 2,
'data2': 14,
'data3': 6,
'data4': 1,
'data5': 23
}, {
'name': 'metric five',
'data1': 27,
'data2': 38,
'data3': 36,
'data4': 13,
'data5': 33
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'data1'
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name'
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'data1',
style: {
fill: 'blue'
}
}]
});
Ext.define('axis3.view.Chart', {
extend: 'Ext.Panel',
requires: ['Ext.TitleBar'],
alias: 'widget.chartview',
getSlideLeftTransition: function () {
return { type: 'slide', direction: 'left' };
},
getSlideRightTransition: function () {
return { type: 'slide', direction: 'right' };
},
config: {
layout: {
type: 'fit'
},
items: [{
xtype : 'label',
html : 'Some label.'
},
{
xtype: 'container',
flex: 1,
items:chartq //Ext.chart.Chart
},
{
xtype: 'toolbar',
docked: 'bottom',
},
{
xtype: 'titlebar',
title: 'Axis First Stats App',
docked: 'top',
items: [
{
xtype: 'button',
text: 'Log Off',
itemId: 'logOffButton',
align: 'right'
},
{
xtype: 'button',
text: 'Back',
itemId: 'backButton',
align: 'left'
},
],
}],
html: [
'<div id="localuid">Signed in Uid: <span>'+localStorage.uid+'</span></div>'
].join(""),
listeners: [{
delegate: '#logOffButton',
event: 'tap',
fn: 'onLogOffButtonTap'
},{
delegate: '#backButton',
event: 'tap',
fn: 'onBacktButtonTap'
}]
},
onLogOffButtonTap: function () {
localStorage.clear();
window.location.reload();
},
onBackButtonTap: function () {
Ext.create('axis3.view.Main',{});
Ext.Viewport.animateActiveItem('mainview', this.getSlideRightTransition());
},
});
The view becomes active as expected when a button in the toolbar is pressed. But, the chart is not visible. No errors are shown in console log. I have tried adding the variable to the config and to the 'items', but the chart still does not show. No errors in console.log
The container for the chart is being created in the browser as expected - just no graph appearing
Can someone please tell me what I am missing?

Answer 1

Charts need a width and height before they'll render properly. I added a static width and height to your chartq definition and it appeared as I would expect:
var chartq = new Ext.chart.Chart({
width: 100,
height: 100,
store: {...