<style scoped>

#mychart {

margin:10px 10px 10px 10px;

width:90%;

max-width: 800px;

height:400px;

}

</style>

<div class="intro">

<p>This example shows how to create a `Chart` with multiple value axes.</p>

</div>

<div class="example">

{{>charts-dualaxes-source}}

</div>

<h3>Creating a `Chart` with multiple axes.</h3>

<p>Multiple axes charts are useful for comparing trends in two or more data sets whose numeric range differs greatly. In this example, we'll create two `NumericAxis` through the

`axes` attribute. By defining a separate axis for each key in our data provider, we can plot percentages and dollar sales on the same graph.</p>

```

YUI().use('charts', function (Y)

{

var myDataValues = [

{month:"January", internetSales: 110000, percentOfRevenue: 25},

{month:"February", internetSales: 333500, percentOfRevenue: 28},

{month:"March", internetSales: 90500, percentOfRevenue: 15},

{month:"April", internetSales: 255550, percentOfRevenue: 21},

{month:"May", internetSales: 445000, percentOfRevenue: 33},

{month:"June", internetSales: 580000, percentOfRevenue: 38}

];

//Define axes and assign keys

var myAxes = {

percentage: {

type:"numeric",

position:"right",

keys:["percentOfRevenue"],

labelFormat: {suffix:"%"}

},

sales: {

type:"numeric",

position:"left",

keys:["internetSales"],

labelFormat: {

prefix:"$",

thousandsSeparator:","

}

}

};

//Define a series collection so that we can assign nice display names

var mySeries = [

{type:"combo", yKey:"internetSales", yDisplayName:"Internet Sales", xDisplayName:"Month"},

{type:"combo", yKey:"percentOfRevenue", yDisplayName:"Percent of Total Revenue", xDisplayName:"Month"}

];

var mychart = new Y.Chart({

dataProvider:myDataValues,

categoryKey:"month",

axes:myAxes,

seriesCollection:mySeries,

render:"#mychart"

});

});

```