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 a data table
4
var dataTable = anychart.data.table();
5
dataTable.addData([
6
['2016-12-24', 511.53, 514.98, 505.79, 506.40],
7
['2016-12-25', 512.53, 514.88, 505.69, 507.34],
8
['2016-12-26', 511.83, 514.98, 505.59, 506.23],
9
['2016-12-27', 511.22, 515.30, 505.49, 506.47],
10
['2016-12-28', 510.35, 515.72, 505.23, 505.80],
11
['2016-12-29', 510.53, 515.86, 505.38, 508.25],
12
['2016-12-30', 511.43, 515.98, 505.66, 507.45],
13
['2016-12-31', 511.50, 515.33, 505.99, 507.98],
14
['2017-01-01', 511.32, 514.29, 505.99, 506.37],
15
['2017-01-02', 511.70, 514.87, 506.18, 506.75],
16
['2017-01-03', 512.30, 514.78, 505.87, 508.67],
17
['2017-01-04', 512.50, 514.77, 505.83, 508.35],
18
['2017-01-05', 511.53, 516.18, 505.91, 509.42],
19
['2017-01-06', 511.13, 516.01, 506.00, 509.26],
20
['2017-01-07', 510.93, 516.07, 506.00, 510.99],
21
['2017-01-08', 510.88, 515.93, 505.22, 509.95],
22
['2017-01-09', 509.12, 515.97, 505.15, 510.12],
23
['2017-01-10', 508.53, 516.13, 505.66, 510.42],
24
['2017-01-11', 508.90, 516.24, 505.73, 510.40]
25
]);
26
27
// map the data
28
mapping = dataTable.mapAs({
29
open: 1, high: 2, low: 3, close: 4, value: 4
30
});
31
32
// create a stock chart
33
var chart = anychart.stock();
34
35
// create two plots
36
var plot_1 = chart.plot(0);
37
var plot_2 = chart.plot(1);
38
39
// add an extra axis
40
plot_1.yAxis(1, {orientation: 'right'});
41
42
// create two series: line and ohlc
43
plot_1.line(mapping);
44
plot_2.ohlc(mapping);
45
46
// configure the crosshair
47
48
// enable the x-label on the first plot
49
plot_1.crosshair().xLabel(true);
50
51
// set the text of the y-labels on both plots
52
chart.crosshair().yLabel().format("${%Value}");
53
54
/* configure the appearance of the labels
55
on the first plot */
56
var crosshair_1 = plot_1.crosshair();
57
crosshair_1.xLabel().fontColor("#64b5f6");
58
crosshair_1.xLabel().background({
59
fill: "white",
60
stroke: "#64b5f6"
61
});
62
63
// configure a label on the default axis
64
crosshair_1.yLabel(0).fontColor("#64b5f6");
65
crosshair_1.yLabel(0).background({
66
fill: "white",
67
stroke: "#64b5f6"
68
});
69
70
// create an extra label on extra axis
71
crosshair_1.yLabel(1).axisIndex(1);
72
73
/* configure the appearance of the labels
74
on the second plot */
75
var crosshair_2 = plot_2.crosshair();
76
crosshair_2.xLabel().fontColor("#ffa000");
77
crosshair_2.xLabel().background({
78
fill: "white",
79
fill: "white",
80
stroke: "#ffa000"
81
});
82
crosshair_2.yLabel().fontColor("#ffa000");
83
crosshair_2.yLabel().background({
84
stroke: "#ffa000"
85
});
86
87
// set the chart padding and title
88
chart.padding().left(75).right(50);
89
chart.title("Crosshair: Labels");
90
91
// set the container id
92
chart.container("container");
93
94
// initiate drawing the chart
95
chart.draw();
96
});