ExtJS Stacked Bar Chart Example


You want to display a stacked bar chart.


Use the Ext.chart.Chart, and set the “series” property, including type: ‘bar’ and stacked: true.

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: 'bar',
	highlight: true,
	column: true,
	stacked: true,
        xField: 'state',
        yField: ['entry', 'exit']


It’s easy to switch between stacked and non-stacked bar charts, using the stacked attribute. Unfortunately the data layout for these charts does not match a typical database query that would be used to generate them:

FROM facts

If you’re graphing data from an OLTP style data warehouse, you’ll need to add code to pivot the output data into an Ext store, or write a new type of store.

As with the other graphs, this code involves a fair amount of repetition – ExtJS considers the chart above to be a “column” chart, even though there is a separate property for the bar chart called “axis”, which tells Ext which axis is numeric (and anyway, bar charts usually have one descriptive axis and one numeric).

Interested in JavaScript? I send out weekly, personalized emails with articles and conference talks. Click here to see an example and subscribe.

1 reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *