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
// setting data
4
var data = [
5
["P1", 16, 20],
6
["P2", 12, 18],
7
["P3", 9, 14]
8
];
9
10
var stage = anychart.graphics.create("container");
11
12
// setting basic title
13
var mainTitle = anychart.standalones.title();
14
mainTitle.parentBounds(0, 0, "100%", "10%");
15
mainTitle.text("Ticks Position");
16
mainTitle.container(stage);
17
mainTitle.draw();
18
19
// first chart
20
var columnChart = anychart.column();
21
columnChart.data(data);
22
23
columnChart.title("Tickmarks Outside");
24
25
// setting chart's size and position
26
columnChart.bounds(0, "10%", "48%", "85%");
27
28
columnChart.background().stroke("#CCCCCC");
29
30
// set x ticks position
31
columnChart.xAxis().ticks().enabled(true);
32
columnChart.xAxis().ticks().position("outside");
33
34
// set y ticks position
35
columnChart.yAxis().minorTicks().enabled(true);
36
columnChart.yAxis().minorTicks().position("outside");
37
columnChart.yAxis().ticks().position("outside");
38
39
// setting major ticks interval on y scale
40
columnChart.yScale().ticks().interval(5);
41
42
// display chart
43
columnChart.container(stage);
44
columnChart.draw();
45
46
// second chart
47
var lineChart = anychart.line();
48
lineChart.data(data);
49
lineChart.title("Tickmarks Inside");
50
51
// setting chart's size and position
52
lineChart.bounds("52%", "10%", "48%", "85%");
53
54
lineChart.background().stroke("#CCCCCC");
55
56
// adjusting x axis
57
lineChart.xAxis().ticks().enabled(true);
58
lineChart.xAxis().ticks().position("inside");
59
60
// adjusting y axis
61
lineChart.yAxis().title().enabled(false);
62
lineChart.yAxis().minorTicks().position("inside");
63
lineChart.yAxis().ticks().position("inside");
64
65
// setting major ticks interval on y scale
66
lineChart.yScale().ticks().interval(5);
67
68
// display chart
69
lineChart.container(stage);
70
lineChart.draw();
71
});