f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<style scoped>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp#mychart {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp margin:10px 10px 10px 10px;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp width:90%;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp max-width: 800px;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp height:400px;

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp}

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp</style>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<div class="intro">

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<p>This example shows how to add a legend to a `Chart`.</p>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp</div>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<div class="example">

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp{{>charts-legend-source}}

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp</div>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<h3>Adding a legend to a `Chart` instance</h3>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp<p>When a chart has multiple series, a legend can allow the user to identify each series more easily. The `charts` module includes a `charts-legend` submodule. Specifying

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp`charts-legend` in you use statement allows you to add a legend to a `Chart` instance. A legend is added to a chart through the `legend` attribute. This attribute is an

f095a571b21c645c423de8ecc101dbd4612d6ef9Trippobject containing value pairs for the attributes of a legend. All available attributes for the `legend` are outlined <a href="index.html#usinglegend">here</a>. In the

f095a571b21c645c423de8ecc101dbd4612d6ef9Trippexample below, we will add a legend to a chart instance.</p>

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp```

f095a571b21c645c423de8ecc101dbd4612d6ef9TrippYUI().use('charts-legend', function (Y)

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp{

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp var myDataValues = [

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp ];

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp var myChart = new Y.Chart({

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp legend: {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp position: "right",

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp width: 300,

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp height: 300,

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp styles: {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp hAlign: "center",

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp hSpacing: 4

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp }

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp },

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp axes: {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp category: {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp keys: ["date"],

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp type: "category",

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp styles: {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp label: {

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp rotation: -90

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp }

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp }

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp }

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp },

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp categoryKey: "date",

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp dataProvider:myDataValues,

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp horizontalGridlines: true,

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp verticalGridlines: true,

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp render:"#mychart"

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp });

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp});

f095a571b21c645c423de8ecc101dbd4612d6ef9Tripp```