bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff<style scoped>

bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff#mychart {

bb82d389f8b12cd4366603113b2fc397561c0b9dJeff Conniff margin:10px 10px 10px 10px;

width:90%;

max-width: 800px;

height:400px;

}

</style>

<div class="intro">

<p>This example shows how to add gridlines to a `Chart`.</p>

</div>

<div class="example">

{{>charts-gridlines-source}}

</div>

<h3>Adding gridlines to a `Chart` instance</h3>

<p>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.</p>

```

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"

}

}

}

});

});

```