68N/A<style scoped>

68N/A#mychart {

68N/A margin:10px 10px 10px 10px;

68N/A width:90%;

68N/A max-width: 800px;

68N/A height:400px;

68N/A}

68N/A</style>

68N/A<div class="intro">

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

68N/A</div>

68N/A<div class="example">

68N/A{{>charts-dualaxes-source}}

68N/A</div>

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

68N/A

68N/A

68N/A<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

68N/A`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>

68N/A

68N/A```

68N/AYUI().use('charts', function (Y)

68N/A{

68N/A var myDataValues = [

68N/A {month:"January", internetSales: 110000, percentOfRevenue: 25},

68N/A {month:"February", internetSales: 333500, percentOfRevenue: 28},

68N/A {month:"March", internetSales: 90500, percentOfRevenue: 15},

68N/A {month:"April", internetSales: 255550, percentOfRevenue: 21},

68N/A {month:"May", internetSales: 445000, percentOfRevenue: 33},

68N/A {month:"June", internetSales: 580000, percentOfRevenue: 38}

68N/A ];

68N/A

68N/A //Define axes and assign keys

68N/A var myAxes = {

68N/A percentage: {

68N/A type:"numeric",

68N/A position:"right",

68N/A keys:["percentOfRevenue"],

68N/A labelFormat: {suffix:"%"}

68N/A },

68N/A sales: {

68N/A type:"numeric",

68N/A position:"left",

68N/A keys:["internetSales"],

68N/A labelFormat: {

68N/A prefix:"$",

68N/A thousandsSeparator:","

68N/A }

68N/A }

68N/A };

68N/A

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

68N/A var mySeries = [

68N/A {type:"combo", yKey:"internetSales", yDisplayName:"Internet Sales", xDisplayName:"Month"},

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

68N/A ];

68N/A

68N/A var mychart = new Y.Chart({

68N/A dataProvider:myDataValues,

68N/A categoryKey:"month",

68N/A axes:myAxes,

68N/A seriesCollection:mySeries,

68N/A render:"#mychart"

});

});

```