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
3
// create a stage for two charts
4
var stage = anychart.graphics.create("container", 600, 800);
5
6
// setting data
7
var data = [
8
["January", 200, 180],
9
["February", 289, 290],
10
["March", 197, 370],
11
["April", 210, 400],
12
["May", 220, 120],
13
["June", 215, 214],
14
["July", 209, 153],
15
["August", 357, 257],
16
["September", 333, 183],
17
["October", 218, 236],
18
["November", 289, 147],
19
["December", 266, 368]
20
];
21
22
// create a chart
23
var chart_1 = anychart.column();
24
chart_1.data(data);
25
chart_1.title("Adaptive Stagger Labels");
26
27
// enables stagger mode
28
chart_1.xAxis().staggerMode(true);
29
// set the number of maximum lines for labels to stagger
30
// if chart is able to fit labels without staggering or staggering
31
// in 2 or 3 lines - it will do so. It will not go over 4 lines:
32
chart_1.xAxis().staggerMaxLines(4);
33
34
// create a chart
35
var chart_2 = anychart.column();
36
chart_2.data(data);
37
chart_2.title("Fixed Stagger Labels");
38
39
// enables stagger mode
40
chart_2.xAxis().staggerMode(true);
41
// set the number of lines for labels to stagger
42
chart_2.xAxis().staggerLines(3);
43
44
// place charts on the stage
45
chart_1.bounds(0, 0, "100%", "50%");
46
chart_1.container(stage).draw();
47
48
chart_2.bounds(0, "50%", "100%", "50%");
49
chart_2.container(stage).draw();
50
});