+
+This example shows how to add a legend to a Chart.
+
+
+
+
+Adding a legend to a Chart instance
+
+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
+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
+object containing value pairs for the attributes of a legend. All available attributes for the legend are outlined here. In the
+example below, we will add a legend to a chart instance.
CSS
+#mychart {
+ margin:10px 10px 10px 10px;
+ width:90%;
+ max-width: 800px;
+ height:400px;
+}
+
+
+HTML
+<div id="mychart"></div>+ + +
JavaScript
+YUI().use('charts-legend', function (Y)
+{
+ var myDataValues = [
+ {date:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
+ {date:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
+ {date:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
+ {date:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
+ {date:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
+ ];
+
+ var myChart = new Y.Chart({
+ legend: {
+ position: "right",
+ width: 300,
+ height: 300,
+ styles: {
+ hAlign: "center",
+ hSpacing: 4
+ }
+ },
+ axes: {
+ category: {
+ keys: ["date"],
+ type: "category",
+ styles: {
+ label: {
+ rotation: -90
+ }
+ }
+ }
+ },
+ categoryKey: "date",
+ dataProvider:myDataValues,
+ horizontalGridlines: true,
+ verticalGridlines: true,
+ render:"#mychart"
+ });
+
+});
+
+