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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<style scoped>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp margin:10px 10px 10px 10px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp max-width: 800px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp height:400px;
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="intro">
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>This example shows how to use a `Chart`'s `styles` attribute to customize a `Chart`.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<div class="example">
2431f6aca1be7f7a136c5df34022e3f902490075Tripp{{>charts-globalstyles-source}}
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<h3>Customizing a `Chart` with the `styles` attribute.</h3>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp<p>Many properties of the chart and its components can be customized through the `Chart`'s `styles` attribute. The `styles` attribute is an object literal containing
d676c69348c891c2a261a6dbd4f450ddb2e312f3Trippreferences to different components of a chart. These references each containing object literals specifying different properties for each component. The `styles` attribute breaks up
2431f6aca1be7f7a136c5df34022e3f902490075Trippas follows.</p>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>graph: a key based object referencing the customizable properties of the `Chart` instance's `Graph`.</li>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>axes: a key based object containing references to the customizable properties of each axis in the `Chart`. By default, the primary category axis key is "category" and the primary value
2431f6aca1be7f7a136c5df34022e3f902490075Tripp axis key is "values".</li>
2431f6aca1be7f7a136c5df34022e3f902490075Tripp <li>series: a key based object container references to the customizable properties of each series in the `Chart`.
d676c69348c891c2a261a6dbd4f450ddb2e312f3Tripp<p>In this example, we'll style the axis labels and the series colors. For both axes, we will change the colors and rotation. For two of the series, we will change their line and marker colors.
2431f6aca1be7f7a136c5df34022e3f902490075TrippFor all of the series, we will change over properties of the markers to create a mouseover effect.</p>
2431f6aca1be7f7a136c5df34022e3f902490075TrippYUI().use('charts', function (Y)
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var styleDef = {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp rotation:-45,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#ff0000"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp rotation:-45,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#ff0000"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp international:{
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#ff8888"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#ff0000"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#ffffff"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#fe0000"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#ff0000"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#999"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#ddd"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color:"#999"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#eee"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#000"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp domestic: {
2431f6aca1be7f7a136c5df34022e3f902490075Tripp color: "#eee"
2431f6aca1be7f7a136c5df34022e3f902490075Tripp var mychart = new Y.Chart({
2431f6aca1be7f7a136c5df34022e3f902490075Tripp dataProvider:myDataValues,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp interactionType:"planar",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp categoryKey:"date",
2431f6aca1be7f7a136c5df34022e3f902490075Tripp styles:styleDef,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp horizontalGridlines:true,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp verticalGridlines:true,
2431f6aca1be7f7a136c5df34022e3f902490075Tripp render:"#mychart"