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
[2000, 10000],
6
[2001, 12000],
7
[2002, 18000],
8
[2003, 11000],
9
[2004, 9000]
10
];
11
12
// create chart
13
var chart = anychart.area(data);
14
15
// custom scale
16
var additionalScale = anychart.scales.linear();
17
// set ticks interval
18
additionalScale.minimum(0);
19
additionalScale.maximum(10);
20
additionalScale.ticks().interval(1);
21
22
// y axis title
23
chart.yAxis().title("Sales");
24
25
// apply custom scale
26
var yAxis1 = chart.yAxis(1);
27
yAxis1.orientation("right");
28
yAxis1.scale(additionalScale);
29
yAxis1.title("Sales Pts");
30
yAxis1.labels(false);
31
32
// set marker
33
var textMarker = chart.textMarker(0);
34
// bind marker to the scale
35
textMarker.axis(chart.yAxis());
36
// set marker position
37
textMarker.value(18000);
38
// set marker alignment
39
textMarker.align("left");
40
// set anchor
41
textMarker.anchor("left-center");
42
// set marker text size
43
textMarker.fontSize(12);
44
// set marker text color
45
textMarker.fontColor("#212121");
46
// shift marker
47
textMarker.offsetX(5);
48
// set marker text
49
textMarker.text("Historical Maximum");
50
// enable text marker background and configure it
51
textMarker.background().enabled(true);
52
textMarker.background().stroke("1 gray");
53
textMarker.background().fill("gray 0.1");
54
textMarker.padding(3);
55
56
// set red marker
57
var textMarker1 = chart.textMarker(1);
58
// bind marker to the scale
59
textMarker1.axis(chart.yAxis());
60
// set marker position
61
textMarker1.value(18000);
62
// set marker alignment
63
textMarker1.align("left");
64
// set anchor
65
textMarker1.anchor("center");
66
// rotate marker
67
textMarker1.rotation(-90);
68
// set marker text size
69
textMarker1.fontSize(13);
70
// set marker text
71
textMarker1.text("High");
72
// shift marker
73
textMarker1.offsetX(-75);
74
// set marker text color
75
textMarker1.fontColor("red");
76
77
// set green marker
78
var textMarker2 = chart.textMarker(2);
79
textMarker2.axis(chart.yAxis());
80
textMarker2.value(10000);
81
textMarker2.text("Low");
82
textMarker2.align("left");
83
textMarker2.anchor("center");
84
textMarker2.rotation(-90);
85
textMarker2.fontSize(13);
86
textMarker2.offsetX(-75);
87
textMarker2.fontColor("green");
88
89
// set text marker on the right
90
var textMarker3 = chart.textMarker(3);
91
textMarker3.axis(yAxis1);
92
textMarker3.value(8);
93
textMarker3.text("8.00");
94
textMarker3.align("right");
95
textMarker3.anchor("left-center");
96
textMarker3.fontWeight("bold");
97
textMarker3.fontSize(13);
98
textMarker3.offsetX(10);
99
100
// draw
101
chart.container("container");
102
chart.draw();
103
});