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