HTMLcopy
1
<select id="positionSelect" onclick="legendPosition()">
2
<option value="top">Position: Top</option>
3
<option value="bottom">Position: Bottom</option>
4
<option value="right" selected>Position: Right</option>
5
<option value="left">Position: Left</option>
6
</select>
7
<select id="alignSelect" onclick="legendAlign()">
8
<option value="center">Align: Center</option>
9
<option value="top" selected>Align: Top</option>
10
<option value="bottom">Align: Bottom</option>
11
<option value="right">Align: Right</option>
12
<option value="left">Align: Left</option>
13
</select>
14
<div id="container"></div>
CSScopy
15
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
select {
8
margin: 10px 0 0 10px;
9
}
10
#container {
11
position: absolute;
12
width: 100%;
13
top: 35px;
14
bottom: 0;
15
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create a data set
4
var data = anychart.data.set([
5
["January", 7000, 11000],
6
["February", 9000, 13000],
7
["March", 14000, 12000],
8
["April", 13000, 10000],
9
["May", 11000, 6000]
10
]);
11
12
// map the data
13
var seriesData1 = data.mapAs({x: 0, value: 1});
14
var seriesData2 = data.mapAs({x: 0, value: 2});
15
16
// create a chart
17
chart = anychart.line();
18
19
// create series, set the data and names
20
var series1 = chart.line(seriesData1);
21
var series2 = chart.line(seriesData2);
22
series1.name("2017");
23
series2.name("2018");
24
25
// set the background of the data area
26
chart.dataArea().background().enabled(true);
27
chart.dataArea().background().fill("#96a6a6 0.3");
28
29
// enable the legend
30
legend = chart.legend();
31
legend.enabled(true);
32
33
// set the layout of the legend
34
legend.itemsLayout("vertical");
35
36
// set the position of the legend
37
legend.position("right");
38
39
// set the alignment of the legend
40
legend.align("top");
41
42
// set the chart title
43
chart.listen("chartDraw", function () {
44
chart.title("Legend: Position = " + chart.legend().position() +
45
", Align = " + chart.legend().align());
46
});
47
48
// set the container id
49
chart.container("container");
50
51
// initiate drawing the chart
52
chart.draw();
53
});
54
// set the position of the legend
55
function legendPosition() {
56
var position = document.getElementById("positionSelect");
57
legend.position(position.value);
58
}
59
60
// set the alignment of the legend
61
function legendAlign() {
62
var align = document.getElementById("alignSelect");
63
legend.align(align.value);
64
}