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, 518.40],
7
["2016-12-25", 512.53, 514.88, 505.69, 507.34, 519.34],
8
["2016-12-26", 511.83, 514.98, 505.59, 506.23, 518.23],
9
["2016-12-27", 511.22, 515.30, 505.49, 506.47, 518.47],
10
["2016-12-28", 510.35, 515.72, 505.23, 505.80, 517.80],
11
["2016-12-29", 510.53, 515.86, 505.38, 508.25, 520.25],
12
["2016-12-30", 511.43, 515.98, 505.66, 507.45, 519.45],
13
["2016-12-31", 511.50, 515.33, 505.99, 507.98, 519.98],
14
["2017-01-01", 511.32, 514.29, 505.99, 506.37, 518.37],
15
["2017-01-02", 511.70, 514.87, 506.18, 506.75, 519.75]
16
]);
17
18
// map the data
19
mapping = dataTable.mapAs(
20
{open: 1, high: 2, low: 3, close: 4, value: 5}
21
);
22
23
// create a stock chart
24
var chart = anychart.stock();
25
26
// create a plot
27
var plot = chart.plot(0);
28
29
// create two series: line and ohlc
30
plot.line(mapping);
31
plot.ohlc(mapping);
32
33
// enable html for the legend
34
plot.legend().useHtml(true);
35
36
// configure the format of legend items
37
plot.legend().itemsFormat(function() {
38
var series = this.series;
39
if (series.getType() == "line") {
40
return "<span style='color:#455a64;font-weight:600'>" +
41
series.name() + ":</span> " + this.value;
42
}
43
if (series.getType() == "ohlc") {
44
return "<span style='color:#455a64;font-weight:600'>" +
45
series.name() + ":</span> " +
46
this.open + " / " + this.high + " / " +
47
this.low + " / " + this.close;
48
}
49
});
50
51
// set the chart title
52
chart.title("AnyStock Legend: Item Text Format (Formatting Functions)");
53
54
// set the container id
55
chart.container("container");
56
57
// initiate drawing the chart
58
chart.draw();
59
});