Example: Create Chart with a Legend

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