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