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 Rectangle annotation and configure its visual settings
26
rectangle1 = controller.rectangle({
27
xAnchor: "2006-11-19",
28
valueAnchor: 29.84,
29
secondXAnchor: "2007-03-25",
30
secondValueAnchor: 25.11,
31
hovered: {
32
fill: "#398cae 0.3",
33
stroke: "2 #ff0000"
34
},
35
selected: {
36
fill: "#398cae 0.3",
37
hatchFill: "forward-diagonal",
38
stroke: "4 #ff0000"
39
}
40
});
41
42
// create the second Rectangle annotation
43
rectangle2 = controller.rectangle();
44
45
// set the position of the second annotation
46
rectangle2.xAnchor("2005-11-20");
47
rectangle2.valueAnchor(15.55);
48
rectangle2.secondXAnchor("2007-02-25");
49
rectangle2.secondValueAnchor(23.30);
50
51
// configure the visual settings of the second annotation
52
rectangle2.normal().fill("none");
53
rectangle2.normal().stroke("#006600", 1, "10 2");
54
rectangle2.hovered().stroke("#00b300", 2, "10 2");
55
rectangle2.selected().stroke("#00b300", 4, "10 2");
56
57
// create the third Rectangle annotation
58
rectangle3 = controller.rectangle();
59
60
// set the position of the third annotation
61
rectangle3.xAnchor("2005-12-20");
62
rectangle3.valueAnchor(15.55);
63
rectangle3.secondXAnchor("2007-03-25");
64
rectangle3.secondValueAnchor(23.30);
65
66
// configure the visual settings of the third annotation
67
rectangle3.normal().fill("none");
68
rectangle3.normal().stroke("#006600", 1, "10 2");
69
rectangle3.hovered().stroke("#00b300", 2, "10 2");
70
rectangle3.selected().stroke("#00b300", 4, "10 2");
71
72
// set the chart title
73
chart.title("Rectangle: Appearance");
74
75
// set the container id
76
chart.container("container");
77
78
// initiate drawing the chart
79
chart.draw();
80
});