#

# Example: Create Chart with a Legend

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

    });