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
chart = anychart.column([
4
{x: "Waffle Bowl", value: 1000},
5
{x: "Kids Cone", value: 1300},
6
{x: "Cake Cup", value: 1400},
7
{x: "Color Cup", value: 1100},
8
{x: "Jumbo Cup", value: 9000},
9
{x: "Jacketed Waffle Cone", value: 1000},
10
{x: "Sugar Cone", value: 5000}
11
]);
12
13
chart.getSeries(0).selected().labels({enabled: true, format: "{%x}"});
14
15
// create a label
16
var label = chart.label();
17
18
label.padding(10, 10);
19
label.position("right-top");
20
label.anchor("right-top");
21
label.offsetY(15);
22
label.offsetX(25);
23
label.width(200);
24
label.hAlign("center");
25
label.text("Ice cream cones types");
26
27
// another way of setting everything is JSON
28
label.background({
29
"enabled": true,
30
"fill": "White",
31
"stroke": "2 gold",
32
"cornerType": "round-inner",
33
"corners": 5});
34
35
// cycle counter
36
var i = 0;
37
38
// listen for a click and select the next point
39
label.listen("click", function() {
40
chart.getSeries(0).getPoint(i).selected(true);
41
i++;
42
if (i==chart.getSeries(0).data().getRowsCount()) i=0;
43
});
44
45
// change cursor and label color on mouse hover
46
label.listen("mouseOver", function() {
47
this.background().fill("Gray 0.2");
48
document.body.style.cursor = "hand";
49
});
50
51
// reset cursor and color on mouse out
52
label.listen("mouseOut", function() {
53
this.background().fill("White");
54
document.body.style.cursor = "auto";
55
});
56
57
// draw a chart
58
chart.container("container");
59
chart.draw();
60
});