Cross Reference: /yui3/src/charts/docs/charts-gridlines.mustache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp#mychart {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp width:90%;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp</style>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to add gridlines to a `Chart`.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-gridlines-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp</div>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Adding gridlines to a `Chart` instance</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<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
2431f6aca1be7f7a136c5df34022e3f902490075Trippadd 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`
2431f6aca1be7f7a136c5df34022e3f902490075Trippobject of a gridline contains the line property with color, alpha and weight attributes.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp
2431f6aca1be7f7a136c5df34022e3f902490075Tripp```
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var myDataValues = [
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/2/2010", miscellaneous:50, expenses:9100, revenue:100},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/3/2010", miscellaneous:400, expenses:1100, revenue:1500},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/4/2010", miscellaneous:200, expenses:1900, revenue:2800},
2431f6aca1be7f7a136c5df34022e3f902490075Tripp {category:"5/5/2010", miscellaneous:5000, expenses:5000, revenue:2650}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp ];
2431f6aca1be7f7a136c5df34022e3f902490075Tripp
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp horizontalGridlines: {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp styles: {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp line: {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#dad8c9"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }
2431f6aca1be7f7a136c5df34022e3f902490075Tripp },
2431f6aca1be7f7a136c5df34022e3f902490075Tripp verticalGridlines: {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp styles: {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp line: {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#dad8c9"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }
2431f6aca1be7f7a136c5df34022e3f902490075Tripp }
2431f6aca1be7f7a136c5df34022e3f902490075Tripp });
2431f6aca1be7f7a136c5df34022e3f902490075Tripp});
2431f6aca1be7f7a136c5df34022e3f902490075Tripp```