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
// create data
4
var data = [
5
{x: "John", value: 5000},
6
{x: "Richard", value: 5000},
7
{x: "Larry", value: 5000},
8
{x: "Marta", value: 15000}
9
];
10
11
// create a chart and set the data
12
chart = anychart.pie(data);
13
14
/* listen to the legendItemMouseOver event,
15
enable the hover state of the chart point,
16
and configure the appearance of the legend item */
17
chart.legend().listen("legendItemMouseOver", function(e) {
18
var point = chart.getPoint(e.itemIndex);
19
point.hovered(true);
20
point.set("legendItem", {iconFill: "#455a64"});
21
});
22
23
/* listen to the legendItemMouseOut event,
24
disable the hover state of the chart point
25
and reset the appearance of the legend item */
26
chart.legend().listen("legendItemMouseOut", function(e) {
27
var point = chart.getPoint(e.itemIndex);
28
point.hovered(false);
29
point.set("legendItem", null);
30
});
31
32
// set the chart title
33
chart.title().useHtml(true);
34
chart.title("Events: Legend Items (Single Series)<br><br>" +
35
"<span style='font-size:12; font-style:italic'>" +
36
"Hover over Legend Items");
37
38
// set the container id
39
chart.container("container");
40
41
// initiate drawing the chart
42
chart.draw();
43
});