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
// data
4
var data = anychart.data.set([
5
[1990, 20],
6
[1991, 12],
7
[1992, 8],
8
[1993, 7],
9
[1994, 11]
10
]);
11
12
// chart type
13
var chart = anychart.line();
14
chart.padding(20, 50, 0, 100);
15
16
// set data
17
chart.line(data);
18
19
// first marker
20
var marker = chart.textMarker(0);
21
// bind marker to the scale
22
marker.axis(chart.axis);
23
// set marker position
24
marker.value(13);
25
// set marker's alignment
26
marker.align("center");
27
// set anchor
28
marker.anchor("center");
29
// set marker color
30
marker.fontColor("#212121");
31
// set marker text
32
marker.text("Align: center");
33
34
// second marker
35
var marker1 = chart.textMarker(1);
36
marker1.scale(chart.yScale());
37
marker1.value(13);
38
marker1.text("Align: left");
39
marker1.align("left");
40
marker1.offsetX(5);
41
marker1.fontColor("#212121");
42
marker1.anchor("leftcenter");
43
44
45
// third marker
46
var marker2 = chart.textMarker(2);
47
marker2.axis(chart.yAxis());
48
marker2.value(13);
49
marker2.text("Align: right");
50
marker2.align("right");
51
marker2.offsetX(5);
52
marker2.fontColor("#212121");
53
marker2.anchor("rightcenter");
54
55
// forth marker
56
var marker3 = chart.textMarker(3);
57
marker3.axis(chart.yAxis());
58
marker3.value(15);
59
marker3.text("Align: left\nAnchor: right");
60
marker3.hAlign("right");
61
marker3.align("left");
62
marker3.fontColor("#212121");
63
marker3.offsetX(5);
64
marker3.anchor("rightcenter");
65
66
// fifth marker
67
var marker4 = chart.textMarker(4);
68
marker4.axis(chart.yAxis());
69
marker4.value(4);
70
marker4.text("Align: left\nAnchor: right\nOffsetX: 40");
71
marker4.hAlign("right");
72
marker4.align("left");
73
marker4.fontColor("#212121");
74
marker4.offsetX(40);
75
marker4.anchor("rightcenter");
76
77
// draw
78
chart.container("container");
79
chart.draw();
80
});