Problem
You want to display a stacked bar chart.
Solution
Use the Ext.chart.Chart, and set the “series” property, including type: ‘area’.
Ext.onReady(function() {
Ext.define('ParolePoint', {
extend: 'Ext.data.Model',
fields: ['state', 'entry', 'exit']
});
var store = Ext.create('Ext.data.Store', {
model: 'ParolePoint',
data : [
{state: 'Connecticut', entry:31000, exit:28211},
{state: 'Maine', entry:3627, exit:3692},
{state: 'Massachusetts', entry:98952, exit:96142},
{state: 'New Hampshire', entry:3789, exit:3697},
{state: 'New Jersey', entry:49728, exit:55858},
{state: 'New York', entry:62419, exit:64147},
{state: 'Pennsylvania', entry:13966, exit:13240},
{state: 'Rhode Island', entry:6262, exit:6012},
{state: 'Vermont', entry:4884, exit:5487},
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 470,
height: 300,
store: store,
axes: [
{
title: 'Enter/Exit Parole',
type: 'Numeric',
position: 'left',
fields: ['entry', 'exit'],
},
{
title: 'State',
type: 'Category',
position: 'bottom',
fields: ['state'],
title: 'US State',
grid: true,
label: {
rotate: {
degrees: 90
}
}
}],
series: [
{
type: 'area',
highlight: true,
xField: 'state',
yField: ['entry', 'exit']
}
]
});
});
Discussion
This is basically the same as a stacked bar chart, but without all the extra properties (column and stacked). Unlike the bar chart, you can’t change the orientation.