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 = anychart.data.set([
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
var chart = anychart.column();
20
21
chart.title("Range Marker");
22
23
// series data
24
chart.column(data);
25
26
// y axis getter
27
var yAxis = chart.yAxis();
28
29
// create range marker
30
var marker = chart.rangeMarker(0);
31
// set start point of the marker
32
marker.from(0);
33
// set end point of the marker
34
marker.to(245);
35
// set marker inner color
36
marker.fill("#fcd8d7");
37
// set axis
38
marker.axis(yAxis);
39
40
var scale = chart.yScale();
41
scale.minimum(0);
42
43
var vMarker = chart.rangeMarker(1);
44
vMarker.from("June");
45
vMarker.to("August");
46
vMarker.axis(chart.xAxis());
47
vMarker.fill("#d7fcda");
48
49
chart.container("container");
50
chart.draw();
51
});