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.