842ae4bd224140319ae7feec1872b93dfd491143fielding<style scoped>

842ae4bd224140319ae7feec1872b93dfd491143fielding#custom-doc { width: 95%; min-width: 950px; }

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

842ae4bd224140319ae7feec1872b93dfd491143fielding#mychart {

842ae4bd224140319ae7feec1872b93dfd491143fielding margin:10px 10px 10px 10px;

842ae4bd224140319ae7feec1872b93dfd491143fielding width:90%;

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse max-width: 800px;

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd height:400px;

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse}

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd</style>

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd<div class="intro">

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

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd</div>

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd<div class="example">

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse{{>charts-stackedcolumn-source}}

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse</div>

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

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd

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

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcndIn 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>

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcnd```

ce9621257ef9e54c1bbe5ad8a5f445a1f211c2dcndvar myDataValues = [

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

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

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

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

70535d6421eb979ac79d8f49d31cd94d75dd8b2fjorton {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}

67139e2d50d1e11558d87f7042f61cb04bb0d1d2jim];

1660a5facf5797acb7aa1300f5ef86756a0bf493jorton

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrsevar mychart = new Y.Chart({

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse dataProvider:myDataValues,

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse render:"#mychart",

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse type:"column",

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse stacked:true

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse });

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse```

36dbb76eaf57ba9bc273970cc43d838b3e9582ffdougm<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>

36dbb76eaf57ba9bc273970cc43d838b3e9582ffdougm<ul>

36dbb76eaf57ba9bc273970cc43d838b3e9582ffdougm <li>`combo`</li>

cc003103e52ff9d5fe9bed567ef9438613ab4fbfrse <li>`column`</li>

bfd35b329124266ebdab96567241bea57f2e8481dougm <li>`bar`</li>

36dbb76eaf57ba9bc273970cc43d838b3e9582ffdougm <li>`area`</li>

58e628af04b08a350299947721453b13e0ddd997jorton <li>`areaspline`</li>

36dbb76eaf57ba9bc273970cc43d838b3e9582ffdougm <li>`combospline`</li>

58e628af04b08a350299947721453b13e0ddd997jorton</ul>

58e628af04b08a350299947721453b13e0ddd997jorton