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
var stage = anychart.graphics.create("container");
4
5
// title settings
6
var mainTitle = anychart.standalones.title();
7
mainTitle.parentBounds(0, 0, stage.width(), stage.height()*0.1);
8
mainTitle.text("Y-axis labels: width is set to 70 pixels");
9
mainTitle.container(stage);
10
mainTitle.draw();
11
12
// first chart
13
var firstChart = anychart.column();
14
15
// setting stroke for chart container
16
var firstBackground = firstChart.background();
17
firstBackground.stroke("#CCCCCC");
18
19
// setting position and bounds
20
firstChart.bounds(0, "10%", "100%", "45%");
21
22
// formatting labels value using function
23
var firstLabels = firstChart.yAxis().labels();
24
firstLabels.width(80);
25
firstLabels.hAlign("right");
26
firstLabels.format("{%value}{groupsSeparator:.}");
27
28
firstChart.column([
29
["P1", 698712],
30
["P2", 378162],
31
["P3", 739123],
32
["P4", 515632],
33
["P5", 161294]
34
]);
35
36
// draw container
37
firstChart.container(stage);
38
firstChart.draw();
39
40
// second chart
41
var secondChart = anychart.column();
42
43
// adjusting chart container position
44
secondChart.bounds(0, "55%", "100%", "45%");
45
var secondBackground = secondChart.background();
46
secondBackground.stroke("#CCCCCC");
47
48
// adjusting axis labels using function
49
var secondYLabels = secondChart.yAxis().labels();
50
secondYLabels.width(80);
51
secondYLabels.hAlign("right");
52
53
secondChart.column([
54
["P1", 12],
55
["P2", 62],
56
["P3", 23],
57
["P4", 32],
58
["P5", 74]
59
]);
60
61
// draw
62
secondChart.container(stage);
63
secondChart.draw();
64
65
});