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
// the data used in this sample can be obtained from the CDN
4
// https://cdn.anychart.com/csv-data/csco-daily.js
5
// create a data table using this data
6
var dataTable = anychart.data.table();
7
dataTable.addData(get_csco_daily_short_data());
8
9
// map the data
10
var mapping = dataTable.mapAs({"value": 4});
11
12
// create a stock chart
13
var chart = anychart.stock();
14
15
// create a plot on the chart
16
var plot = chart.plot(0);
17
18
// create a line series
19
var lineSeries = plot.line(mapping);
20
lineSeries.name("CSCO");
21
22
// access the annotations() object of the plot to work with annotations
23
var controller = plot.annotations();
24
25
// create the first Marker annotation and configure its size and offset
26
var marker1 = controller.marker({
27
xAnchor: "2008-07-13",
28
valueAnchor: 21.66,
29
size: 30,
30
offsetY: 10
31
});
32
33
// create the second Marker annotation
34
var marker2 = controller.marker();
35
36
// set the position of the second annotation
37
marker2.xAnchor("2007-01-07");
38
marker2.valueAnchor(28.92);
39
40
// set the type of the second annotation
41
marker2.markerType("arrow-down");
42
43
// configure the size and offset of the second annotation
44
marker2.size(30);
45
marker2.offsetY(-40);
46
47
// set the chart title
48
chart.title("Marker: Type and Size");
49
50
// set the container id
51
chart.container("container");
52
53
// initiate drawing the chart
54
chart.draw();
55
});