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 = [
5
["January", 200],
6
["February", 289],
7
["March", 297],
8
["April", 250],
9
["May", 220],
10
["June", 215],
11
["July", 279],
12
["August", 357],
13
["September", 333],
14
["October", 218],
15
["November", 289],
16
["December", 266]
17
];
18
19
// create a chart
20
var chart = anychart.column(data);
21
chart.title("Range Marker");
22
23
// create range marker
24
var marker = chart.rangeMarker(0);
25
// set start point of the marker
26
marker.from(0);
27
// set end point of the marker
28
marker.to(245);
29
// set marker inner color
30
marker.fill("#fcd8d7");
31
// set axis
32
marker.axis(chart.yAxis());
33
34
var vMarker = chart.rangeMarker(1);
35
vMarker.from("June");
36
vMarker.to("August");
37
vMarker.axis(chart.xAxis());
38
vMarker.fill("#d7fcda");
39
40
chart.container("container");
41
chart.draw();
42
});