HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
// create variable for custom theme
3
var customTheme = {
4
// define settings for bar charts
5
"column": {
6
// set chart title
7
"title": {
8
"text": "Column Chart",
9
"enabled": true
10
},
11
// settings for default x axis
12
"defaultXAxisSettings": {
13
// set x axis title
14
"title": {
15
"text": "Retail Channel",
16
"enabled": true
17
}
18
},
19
// settings for default y axis
20
"defaultYAxisSettings": {
21
// set axis name
22
"title": {
23
"text": "Sales",
24
"enabled": true
25
}
26
}
27
}
28
};
29
30
// data
31
var data = [
32
["Department Stores", 637166, 874022],
33
["Discount Stores", 721630, 663728],
34
["Men's/Women's Specialty Stores", 148662, 288322],
35
["All other outlets", 90000, 85000]
36
];
37
38
// apply custom theme
39
anychart.theme(customTheme);
40
41
// append a theme
42
anychart.appendTheme(additional_theme);
43
44
// create chart
45
var chart = anychart.column();
46
// set data
47
chart.data(data);
48
49
// set container and draw chart
50
chart.container("container");
51
chart.draw();
52
});
53
54
additional_theme = {
55
"column": {
56
"title": {
57
"text": "Append a New Additional External Theme to a Column Chart",
58
"fontSize": "14px",
59
"fontColor": "#6a5d4d"
60
},
61
"defaultXAxisSettings": {
62
"title": {
63
"fontSize": "14px",
64
"fontColor": "#6a5d4d"
65
},
66
"labels": {
67
"fontSize": "14px",
68
"fontColor": "#6a5d4d"
69
}
70
},
71
"defaultYAxisSettings": {
72
"title": {
73
"fontSize": "14px",
74
"fontColor": "#6a5d4d"
75
},
76
"labels": {
77
"fontSize": "14px",
78
"fontColor": "#6a5d4d"
79
}
80
},
81
"defaultFontSettings": {
82
"fontSize": "14px",
83
"fontColor": "#705335",
84
"fontFamily": "Garamond"
85
},
86
"background":{
87
"fill": "#999999 .1"
88
},
89
"palette": {
90
"type": "distinct",
91
"items": ["#705335", "#8a9597"]
92
}
93
}
94
};