486N/A<style scoped>

486N/A#mychart {

486N/A margin:10px 10px 10px 10px;

486N/A width:90%;

1068N/A max-width: 800px;

486N/A height:400px;

486N/A}

919N/A</style>

919N/A<div class="intro">

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

919N/A</div>

919N/A<div class="example">

919N/A{{>charts-gridlines-source}}

919N/A</div>

919N/A<h3>Adding gridlines to a `Chart` instance</h3>

919N/A

919N/A<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

919N/Aadd 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`

919N/Aobject of a gridline contains the line property with color, alpha and weight attributes.</p>

919N/A

919N/A```

919N/AYUI().use('charts', function (Y)

919N/A{

919N/A var myDataValues = [

486N/A {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},

486N/A {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},

486N/A {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},

486N/A {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},

493N/A {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}

486N/A ];

970N/A

970N/A var mychart = new Y.Chart({

970N/A dataProvider:myDataValues,

970N/A render:"#mychart",

486N/A horizontalGridlines: {

1179N/A styles: {

486N/A line: {

911N/A color: "#dad8c9"

1179N/A }

1179N/A }

911N/A },

486N/A verticalGridlines: {

1179N/A styles: {

1072N/A line: {

1072N/A color: "#dad8c9"

1072N/A }

486N/A }

486N/A }

1179N/A });

493N/A});

486N/A```

970N/A