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
var table, mapping, chart;
2
anychart.onDocumentReady(function() {
3
// creating the data
4
table = anychart.data.table();
5
table.addData([
6
['2015-12-24T12:00:00', 511.53, 514.98, 505.79, 506.40],
7
['2015-12-25T12:00:00', 512.53, 514.88, 505.69, 507.34],
8
['2015-12-26T12:00:00', 511.83, 514.98, 505.59, 506.23],
9
['2015-12-27T12:00:00', 511.22, 515.30, 505.49, 506.47],
10
['2015-12-28T12:00:00', 510.35, 515.72, 505.23, 505.80],
11
['2015-12-29T12:00:00', 510.53, 515.86, 505.38, 508.25],
12
['2015-12-30T12:00:00', 511.43, 515.98, 505.66, 507.45],
13
['2015-12-31T12:00:00', 511.50, 515.33, 505.99, 507.98],
14
['2016-01-01T12:00:00', 511.32, 514.29, 505.99, 506.37],
15
['2016-01-02T12:00:00', 511.70, 514.87, 506.18, 506.75],
16
['2016-01-03T12:00:00', 512.30, 514.78, 505.87, 508.67],
17
['2016-01-04T12:00:00', 512.50, 514.77, 505.83, 508.35],
18
['2016-01-05T12:00:00', 511.53, 516.18, 505.91, 509.42],
19
['2016-01-06T12:00:00', 511.13, 516.01, 506.00, 509.26],
20
['2016-01-07T12:00:00', 510.93, 516.07, 506.00, 510.99],
21
['2016-01-08T12:00:00', 510.88, 515.93, 505.22, 509.95],
22
['2016-01-09T12:00:00', 509.12, 515.97, 505.15, 510.12],
23
['2016-01-10T12:00:00', 508.53, 516.13, 505.66, 510.42],
24
['2016-01-11T12:00:00', 508.90, 516.24, 505.73, 510.40]
25
]);
26
27
// mapping the data
28
mapping = table.mapAs();
29
mapping.addField('open', 1, 'first');
30
mapping.addField('high', 2, 'max');
31
mapping.addField('low', 3, 'min');
32
mapping.addField('close', 4, 'last');
33
mapping.addField('value', 4, 'last');
34
35
// defining the chart type
36
var chart = anychart.stock();
37
38
39
// setting the series type
40
var series = chart.plot(0).ohlc(mapping);
41
series.name("ACME Corp. Stock Prices");
42
43
xAxis = chart.plot(0).xAxis();
44
45
// setting the ticks for x-axis
46
xAxis.ticks(true).minorTicks(true);
47
48
// disabling the Helper Label
49
xAxis.showHelperLabel(false);
50
51
// moving the labels
52
xAxis.labels().position('bottomright').anchor('lefttop');
53
xAxis.minorLabels().position('bottomright').anchor('lefttop');
54
55
// setting the chart title
56
chart.title('Stock Demo\nMoving the labels');
57
58
chart.container('container');
59
chart.draw();
60
});