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
"bar": {
6
"title": "Bar Chart",
7
"defaultXAxisSettings": {
8
"title": {
9
"text": "Retail Channel",
10
"enabled": true
11
}
12
},
13
"defaultYAxisSettings": {
14
"title": {
15
"text": "Sales",
16
"enabled": true
17
}
18
},
19
"padding": 0
20
},
21
// settings for column charts
22
"column": {
23
"title": "Column Chart",
24
"defaultXAxisSettings": {
25
"title": {
26
"text": "Retail Channel",
27
"enabled": true
28
}
29
},
30
"defaultYAxisSettings": {
31
"title": {
32
"text": "Sales",
33
"enabled": true
34
}
35
},
36
"padding": 0
37
}
38
};
39
40
// data
41
var data = anychart.data.set([
42
["Department Stores", 637166],
43
["Discount Stores", 721630],
44
["Men's/Women's Specialty Stores", 148662],
45
["All other outlets", 90000]
46
]);
47
48
// apply custom theme
49
anychart.theme(customTheme);
50
51
// set stage
52
var stage = anychart.graphics.create("container");
53
54
// set chart type
55
var bar = anychart.bar();
56
bar.bounds(0, 0, "100%", "50%");
57
bar.bar(data);
58
bar.container(stage);
59
bar.draw();
60
61
var column = anychart.column();
62
column.column(data);
63
column.bounds(0, "50%", "100%", "50%");
64
column.container(stage);
65
column.draw();
66
});