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

<h4>CSS</h4>
```
#mychart {
    margin:10px 10px 10px 10px;
    width:90%;
    max-width: 800px;
    height:400px;
}
```

<h4>HTML</h4>
```
<div id="mychart"></div>
```

<h4>JavaScript</h4>
```
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"
                        });
});
```
