#

# Example: Dual Axes Chart

This example shows how to create a `Chart` with multiple value axes.

### Creating a `Chart` with multiple axes.

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.

#### CSS

    #mychart {
        margin:10px 10px 10px 10px;
        width:90%;
        max-width: 800px;
        height:400px;
    }

#### HTML

    <div id="mychart"></div>

#### JavaScript

    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"
                            });
    });