#

# Example: Add Gridlines to a Chart

This example shows how to add gridlines to a `Chart`.

### Adding gridlines to a `Chart` instance

Gridlines can be used to make a chart more readable. You can add gridlines to a chart with the `horizontalGridlines` and `verticalGridlines` attributes. There are 2 ways to add gridlines to a chart. Setting either attribute to `true` will add gridlines with default styling. Alternatively, you can pass a style object to either attribute. The `styles` object of a gridline contains the line property with color, alpha and weight attributes.

#### CSS

    #mychart {
        margin:10px 10px 10px 10px;
        width:90%;
        max-width: 800px;
        height:400px;
    }

#### HTML

    <div id="mychart"></div>

#### JavaScript

    YUI().use('charts', function (Y)
    {
        var myDataValues = [
            {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
            {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
            {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
            {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
            {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
        ];

        var mychart = new Y.Chart({
                            dataProvider:myDataValues,
                            render:"#mychart",
                            horizontalGridlines: {
                                styles: {
                                    line: {
                                        color: "#dad8c9"
                                    }
                                }
                            },
                            verticalGridlines: {
                                styles: {
                                    line: {
                                        color: "#dad8c9"
                                    }
                                }
                            }
                        });
    });