YUI 3.x Home -

YUI Library Examples: Charts: Add Gridlines to a Chart

Charts: Add Gridlines to a Chart

This example shows how to add gridlines to a Chart.

View example in new window.

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.

  1. YUI().use('charts', function (Y) 
  2. { 
  3.     var myDataValues = [ 
  4.         {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200}, 
  5.         {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100}, 
  6.         {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500}, 
  7.         {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800}, 
  8.         {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
  9.     ];
  10.  
  11.     var mychart = new Y.Chart({
  12.                         dataProvider:myDataValues, 
  13.                         render:"#mychart",
  14.                         horizontalGridlines: {
  15.                             styles: {
  16.                                 line: {
  17.                                     color: "#dad8c9"
  18.                                 }
  19.                             }
  20.                         },
  21.                         verticalGridlines: {
  22.                             styles: {
  23.                                 line: {
  24.                                     color: "#dad8c9"
  25.                                 }
  26.                             }
  27.                         }
  28.                     });
  29. });
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"
                                }
                            }
                        }
                    });
});

More Charts Resources:

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings