ExtJS Area Chart Example

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.