YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Stacked Bar Chart

# Charts Control: Stacked Bar Chart

This example demonstrates how to use YUI Charts Control to create a Stacked Bar Chart.

Please note: The YUI Charts Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.

View example in new window.

Media Conglomerate Ad Sales Summary 2004-2007
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the Adobe Flash Player Download Center.

## 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.

var seriesDef = [ { xField: "internetsales", displayName: "Internet Sales" }, { xField: "printsales", displayName: "Print Sales" }, { xField: "tvsales", displayName: "Television Sales" } ];

## Create an Axis

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

//used to format x axis YAHOO.example.numberToCurrency = function( value ) { return YAHOO.util.Number.format(Number(value), {prefix: "$", thousandsSeparator: ","}); } //Numeric Axis for our currency var currencyAxis = new YAHOO.widget.NumericAxis(); currencyAxis.stackingEnabled = true; currencyAxis.labelFunction = YAHOO.example.numberToCurrency;

## Create a StackedBarChart

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

var mychart = new YAHOO.widget.StackedBarChart( "chart", salesData, { series: seriesDef, yField: "year", xAxis: currencyAxis, //only needed for flash player express install expressInstall: "assets/expressinstall.swf" });

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.

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Charts Control Examples:

- Charts Quickstart Example
- Chart with Legend Example
- Skinning a Chart Example
- Chart and DataTable Example
- Chart with DataSource Polling
- Stacked Bar Chart
- Charts in a TabView
- Column Chart with Rotated Title and Labels
- Styling Lines, Borders and Fills
- Chart with 2 Numeric Axes
- Hide series in a chart.
- Customize series items
- Apply scope to label functions

### More Charts Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings