2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp#custom-doc { width: 95%; min-width: 950px; }

2431f6aca1be7f7a136c5df34022e3f902490075Tripp#pagetitle {background-image: url(../../assets/bg_hd.gif);}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp#mychart {

2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp width:90%;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;

2431f6aca1be7f7a136c5df34022e3f902490075Tripp}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</style>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">

d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to create a column `Chart` with a stacked Numeric Axis.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">

2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-stackedcolumn-source}}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>This example shows how to create a Stacked Column Chart.</h3>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>A Stacked Chart is one in which its series are plotted cumulatively against a value axis. Stacked Charts are often used to compare the contribution of each series across categories.

2431f6aca1be7f7a136c5df34022e3f902490075TrippIn the previous example, we made a column chart. In this example, we're going use the `stacked` attribute to change it to a Stacked Column Chart.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```

2431f6aca1be7f7a136c5df34022e3f902490075Trippvar myDataValues = [

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp];

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Trippvar mychart = new Y.Chart({

2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,

2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"column",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp stacked:true

2431f6aca1be7f7a136c5df34022e3f902490075Tripp });

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>Technically, all charts plotted against x and y axes can be stacked. The following series types are most commonly and effectively displayed stacked:</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<ul>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>`combo`</li>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>`column`</li>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>`bar`</li>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>`area`</li>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>`areaspline`</li>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>`combospline`</li>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</ul>