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
var chart = anychart.column([
4
["Jackie", 183],
5
["Tito", 174],
6
["Jermaine", 185],
7
["Marlon", 173],
8
["Michael", 175]
9
]);
10
11
// setting title
12
chart.title("Axis Labels: Interactive");
13
14
// draw chart
15
chart.container("container");
16
chart.draw();
17
18
// get link to Y-Axis
19
yAxis = chart.yAxis();
20
yAxis.labels().format("{%Value} cm")
21
22
// listen for mouseOver on labels
23
yAxis.labels().listen('mouseOver', function(e) {
24
// get the index of the hovered labels
25
var labelIndex = e.labelIndex;
26
// access this label
27
var label = this.getLabel(labelIndex);
28
// get the value associated with this labels
29
var value = yAxis.scale().ticks().get()[labelIndex];
30
// change label format: show the value in feet and inches
31
label.format(toFeet(value));
32
// change color and force display
33
label.fontColor('red');
34
label.draw();
35
});
36
37
yAxis.labels().listen('mouseOut', function(e) {
38
// get the label of the hovered labels
39
var labelIndex = e.labelIndex;
40
// access this labels
41
var label = this.getLabel(labelIndex);
42
// reset format
43
label.format(yAxis.labels().format());
44
// reset color
45
label.fontColor('#7c868e');
46
label.draw();
47
});
48
49
});
50
51
function toFeet(n) {
52
var realFeet = ((n*0.393700) / 12);
53
var feet = Math.floor(realFeet);
54
var inches = Math.round((realFeet - feet) * 12);
55
return feet + "'" + inches + "''";
56
}