HTMLcopy
1
<label><input onclick="legendLayout('horizontal')" type="radio" name="layout" checked>Horizontal</label>
2
<label><input onclick="legendLayout('horizontal-expandable')" type="radio" name="layout">Horizontal-Expandable</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 data
4
var data = [
5
{x: "John Doe", value: 1},
6
{x: "Richard Roe", value: 1},
7
{x: "Larry Loe", value: 1},
8
{x: "Marta Moe", value: 1},
9
{x: "Jane Poe", value: 1},
10
{x: "Norma Noe", value: 1},
11
{x: "William Woe", value: 1}
12
];
13
14
// create a chart and set the data
15
chart = anychart.pie(data);
16
17
// set the chart title
18
chart.listen("chartDraw", function () {
19
chart.title("Legend: Layout = " +
20
chart.legend().itemsLayout());
21
});
22
23
// set the container id
24
chart.container("container");
25
26
// initiate drawing the chart
27
chart.draw();
28
});
29
30
// set the layout of the legend
31
function legendLayout(layout) {
32
chart.legend().itemsLayout(layout);
33
}