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 `Chart` with planar based events.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">

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

2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>This example shows how to create a Stacked Area Chart that fires planar events.</h3>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>By default, Charts fires mouse events based on marker interaction. This is not always preferable. You may have a chart without markers or you may want to display data

2431f6aca1be7f7a136c5df34022e3f902490075Trippabout all markers intersecting a plane. The `interactionType` attribute allows you to do this.

2431f6aca1be7f7a136c5df34022e3f902490075TrippIn this example, setting stacked area chart's `interactionType` attribute to "planar" allows the tooltip to display all relevant data on a vertical plane.</p>

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```

2431f6aca1be7f7a136c5df34022e3f902490075Trippvar myDataValues = [

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

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"2/1/2010", miscellaneous:3000, expenses:3100, revenue:4100},

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

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

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"7/1/2010", miscellaneous:6550, expenses:6500, revenue:1100},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"8/1/2010", miscellaneous:4005, expenses:2600, revenue:3500},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"9/1/2010", miscellaneous:1200, expenses:8900, revenue:3800},

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"10/1/2010", miscellaneous:2000, expenses:1000, revenue:3650},

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

2431f6aca1be7f7a136c5df34022e3f902490075Tripp {date:"12/1/2010", miscellaneous:5000, expenses:3100, revenue:4100}

2431f6aca1be7f7a136c5df34022e3f902490075Tripp];

2431f6aca1be7f7a136c5df34022e3f902490075Tripp

2431f6aca1be7f7a136c5df34022e3f902490075Trippvar mychart = new Y.Chart({

2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,

2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp type:"area",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp stacked:true,

2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryType:"time",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"date",

2431f6aca1be7f7a136c5df34022e3f902490075Tripp interactionType:"planar"

2431f6aca1be7f7a136c5df34022e3f902490075Tripp });

2431f6aca1be7f7a136c5df34022e3f902490075Tripp```