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 = anychart.data.set([
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
// set chart type
45
var chart = anychart.column();
46
// set data
47
seriesData_1 = data.mapAs({x: [0], value: [1]});
48
seriesData_2 = data.mapAs({x: [0], value: [2]});
49
chart.column(seriesData_1);
50
chart.column(seriesData_2);
51
52
// set container and draw chart
53
chart.container("container");
54
chart.draw();
55
});
56
57
additional_theme = {
58
"column": {
59
"title": {
60
"text": "Append a New Additional External Theme to a Column Chart",
61
"fontSize": "14px",
62
"fontColor": "#6a5d4d"
63
},
64
"defaultXAxisSettings": {
65
"title": {
66
"fontSize": "14px",
67
"fontColor": "#6a5d4d"
68
},
69
"labels": {
70
"fontSize": "14px",
71
"fontColor": "#6a5d4d"
72
}
73
},
74
"defaultYAxisSettings": {
75
"title": {
76
"fontSize": "14px",
77
"fontColor": "#6a5d4d"
78
},
79
"labels": {
80
"fontSize": "14px",
81
"fontColor": "#6a5d4d"
82
}
83
},
84
"defaultFontSettings": {
85
"fontSize": "14px",
86
"fontColor": "#705335",
87
"fontFamily": "Garamond"
88
},
89
"background":{
90
"fill": "#999999 .1"
91
},
92
"palette": {
93
"type": "distinct",
94
"items": ["#705335", "#8a9597"]
95
}
96
}
97
};