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
[2005, 10000],
6
[2006, 12000],
7
[2007, 18000],
8
[2008, 19000],
9
[2009, 29000]
10
];
11
12
// create a chart
13
var chart = anychart.line(data);
14
chart.tooltip().format("Year: {%x}\nSales: {%value}");
15
16
// set y scale ticks interval
17
chart.yScale().minimum(0);
18
chart.yScale().maximum(30000);
19
chart.yScale().ticks().interval(5000);
20
21
// adjust y axis labels
22
chart.yAxis().labels().format("${%value}");
23
24
// set green
25
var rangeMarker = chart.rangeMarker();
26
rangeMarker.axis(chart.yAxis());
27
rangeMarker.from(20000);
28
rangeMarker.to(30000);
29
rangeMarker.fill("#009900 0.4");
30
31
// set red marker
32
var rangeMarker1 = chart.rangeMarker(1);
33
rangeMarker1.axis(chart.yAxis());
34
rangeMarker1.fill("#ffa000 0.4");
35
rangeMarker1.from(10000);
36
rangeMarker1.to(20000);
37
38
// set green marker
39
var rangeMarker2 = chart.rangeMarker(2);
40
rangeMarker2.axis(chart.yAxis());
41
rangeMarker2.from(0);
42
rangeMarker2.to(10000);
43
rangeMarker2.fill("#dd2c00 0.4");
44
45
// set left text marker
46
var textMarker = chart.textMarker(0);
47
textMarker.axis(chart.yAxis());
48
textMarker.align("left");
49
textMarker.anchor("left-center");
50
textMarker.offsetX(5);
51
textMarker.value(25000);
52
textMarker.fontColor("#212121");
53
textMarker.text("Good: [20,000.00 - 30,000.00]");
54
textMarker.fontSize(13);
55
56
// set text marker at the center
57
var textMarker1 = chart.textMarker(1);
58
textMarker1.axis(chart.yAxis());
59
textMarker1.align("center");
60
textMarker1.anchor("center");
61
textMarker1.value(15000);
62
textMarker1.fontColor("#212121");
63
textMarker1.hAlign("center");
64
textMarker1.text("Average\n[20,000.00 - 30,000.00]");
65
textMarker1.fontSize(13);
66
67
// set text marker at the center
68
var textMarker2 = chart.textMarker(2);
69
textMarker2.axis(chart.yAxis());
70
textMarker2.align("right");
71
textMarker2.anchor("right-center");
72
textMarker2.offsetX(5);
73
textMarker2.value(5000);
74
textMarker2.fontColor("#212121");
75
textMarker2.text("Severe");
76
textMarker2.fontSize(13);
77
78
// draw
79
chart.container("container");
80
chart.draw();
81
});