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
// create data
4
var data = [
5
["January", 10000],
6
["February", 12000],
7
["March", 18000],
8
["April", 11000],
9
["May", 9000]
10
];
11
12
// create an area chart
13
var chart = anychart.area(data);
14
15
// add and configure a second y-scale
16
var YScale_2 = anychart.scales.linear();
17
YScale_2.minimum(0);
18
YScale_2.maximum(100);
19
YScale_2.ticks().interval(10);
20
21
// add and configure a second y-axis
22
var YAxis_2 = chart.yAxis(1);
23
YAxis_2.orientation("right");
24
YAxis_2.labels().format(function() {
25
return this.value + "%";
26
});
27
28
// bind the second y-axis to the second y-scale
29
YAxis_2.scale(YScale_2);
30
31
// enable the crosshair
32
chart.crosshair(true);
33
34
// configure the crosshair
35
36
/* bind the y-label of the crosshair
37
to the second y-axis */
38
chart.crosshair().yLabel().axisIndex(1);
39
40
// set the text of the y-label
41
chart.crosshair().yLabel().format(function() {
42
return this.value + "%";
43
});
44
45
// set the chart title
46
chart.title("Crosshair: Binding to Axes")
47
48
// set the container id
49
chart.container("container");
50
51
// initiate drawing the chart
52
chart.draw();
53
});