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
// chart type
4
var chart = anychart.financial();
5
6
// chart title
7
chart.title("Multi-series");
8
9
// adjust x scale type
10
var xScale = chart.xScale();
11
xScale.minimum(Date.UTC(2007, 7, 27));
12
xScale.maximum(Date.UTC(2007, 8, 2));
13
var xTicks = xScale.ticks();
14
xTicks.interval(0,0,1);
15
16
// set first series data
17
var series_1 = chart.ohlc([
18
{x: Date.UTC(2007, 7, 28), open:511.53, high:514.98, low:505.79, close:506.40},
19
{x: Date.UTC(2007, 7, 30), open:517.36, high:518.40, low:516.58, close:516.80},
20
{x: Date.UTC(2007, 8, 1), open:513.10, high:516.50, low:511.47, close:515.25}
21
]);
22
series_1.xPointPosition(0.5);
23
series_1.meta("company", "ACME Corp.");
24
25
// set second series data
26
var series_2 = chart.ohlc([
27
{x: Date.UTC(2007, 7, 28), open: 522.95, high: 523.10, low: 522.50, close: 522.52},
28
{x: Date.UTC(2007, 7, 30), open: 524.49, high: 524.91, low: 524.38, close: 524.61},
29
{x: Date.UTC(2007, 8, 1), open: 518.81, high: 520.03, low: 517.51, close: 519.73}
30
]);
31
series_2.xPointPosition(0.5);
32
series_2.meta("company", "Duff B. Corp.");
33
34
// enable the labels
35
var labels_1 = series_1.labels();
36
var labels_2 = series_2.labels();
37
38
// text formatter
39
labels_1.format(function(){
40
return("C: "+this.series.meta("company")+"\nL: "+this.low+"\nH: "+this.high);
41
});
42
labels_2.format(function(){
43
return("C: "+this.series.meta("company")+"\nL: "+this.low+"\nH: "+this.high);
44
});
45
46
// labels positioning
47
labels_1.position("bottom");
48
labels_1.anchor("top");
49
labels_1.offsetY("5");
50
labels_1.enabled(true);
51
labels_2.position("top");
52
labels_2.anchor("bottom");
53
labels_2.offsetY("5");
54
labels_2.enabled(true);
55
56
// set axes title
57
var xAxis = chart.xAxis();
58
xAxis.title("Day");
59
var xLabels = chart.xAxis().labels();
60
xLabels.format(function(value){
61
var date = new Date(value["tickValue"]);
62
var options = {
63
month: "short",
64
day: "numeric"
65
};
66
return date.toLocaleDateString("en-US", options);
67
});
68
var yAxis = chart.yAxis();
69
yAxis.title("Price");
70
71
// draw
72
chart.container("container");
73
chart.draw();
74
});