Create a Stacked BarChart

When creating Bar and Column charts with multiple series, you have the ability to stack your series on top of one-another. In this example, we'll create stacked BarChart, which lets you show the absolute values of data points through their segments, as well as the total values of each series.

Create a DataSource

First, we'll create the DataSource to populate the chart. This DataSource contains four values, a year and three sets of sales figures. YAHOO.example.annualSales = [ { year: 2004, internetsales: 246852, printsales: 2523359, tvsales: 3123493 }, { year: 2005, internetsales: 851876, printsales: 1084952, tvsales: 3166920 }, { year: 2006, internetsales: 3917246, printsales: 587151, tvsales: 2330095 }, { year: 2007, internetsales: 5318185, printsales: 307456, tvsales: 1830729 } ]; var salesData = new YAHOO.util.DataSource( YAHOO.example.annualSales ); salesData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; salesData.responseSchema = { fields: [ "year", "internetsales", "printsales", "tvsales" ] };

Define Series Definition

We will have three series in our example, corresponding to the Internet sales, print sales, and TV sales.

Create an Axis

Create a NumericAxis and set its stackingEnabled property to true. Assign a labelFunction to format the axis.

Create a StackedBarChart

Instantiate a StackedBarChart and set its xAxis to the NumericAxis you created.

The series bars will stack from left to right rather than aligning vertically.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.