HTMLcopy
1
<label><input onclick="legendLayout('horizontal')" type="radio" name="layout" checked>Horizontal</label>
2
<label><input onclick="legendLayout('vertical')" type="radio" name="layout">Vertical</label>
3
<div id="container"></div>
CSScopy
16
1
html, body {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
7
label {
8
display: inline-block;
9
margin: 10px 0 0 10px;
10
}
11
#container {
12
position: absolute;
13
width: 100%;
14
top: 35px;
15
bottom: 0;
16
}
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
// enable the legend
26
chart.legend(true);
27
28
// set the chart title
29
chart.listen("chartDraw", function () {
30
chart.title("Legend: Layout = " +
31
chart.legend().itemsLayout());
32
});
33
34
// set the container id
35
chart.container("container");
36
37
// initiate drawing the chart
38
chart.draw();
39
});
40
41
// set the layout of the legend
42
function legendLayout(layout) {
43
chart.legend().itemsLayout(layout);
44
}