html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

  var chart = anychart.column([

    ["Jackie", 183],

    ["Tito", 174],

    ["Jermaine", 185],

    ["Marlon", 173],

    ["Michael", 175]

  ]);

​

  // setting title

  chart.title("Axis Labels: Interactive");

​

  // draw chart

  chart.container("container");

  chart.draw();

​

  // get link to Y-Axis

  yAxis = chart.yAxis();

  yAxis.labels().format("{%Value} cm")

​

  // listen for mouseOver on labels

  yAxis.labels().listen('mouseOver', function(e) {

    // get the index of the hovered labels

    var labelIndex = e.labelIndex;

    // access this label

    var label = this.getLabel(labelIndex);

    // get the value associated with this labels

    var value = yAxis.scale().ticks().get()[labelIndex];

    // change label format: show the value in feet and inches

    label.format(toFeet(value));

    // change color and force display

    label.fontColor('red');

    label.draw();

  });

​

  yAxis.labels().listen('mouseOut', function(e) {

    // get the label of the hovered labels

    var labelIndex = e.labelIndex;

    // access this labels

    var label = this.getLabel(labelIndex);

    // reset format

    label.format(yAxis.labels().format());

    // reset color

    label.fontColor('#7c868e');

    label.draw();

  });

​

});

​

function toFeet(n) {

  var realFeet = ((n*0.393700) / 12);

  var feet = Math.floor(realFeet);

  var inches = Math.round((realFeet - feet) * 12);

  return feet + "'" + inches + "''";

}