html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

.custom-tooltip {

    visibility: hidden;

    pointer-events: none;

    position: absolute;

    width: 100px;

    padding: 4px;

    border: solid black 2px;

    background: #fff;

}

anychart.onDocumentReady(function () {

​

// create data

var data = anychart.data.set([

  ["Velma", 10],

  ["Fred", 12],

  ["Daphne", 18],

  ["Shaggy", 6],

  ["Scooby", 46]

]);

​

// map the data

var dataMapping = data.mapAs({x: 0, value: 1});

​

// create a chart

var chart = anychart.column(dataMapping);

​

// set the data

var series = chart.getSeries(0);

​

// disable the built-in tooltips

series.tooltip(false);

​

// set the selection mode to single

chart.interactivity().selectionMode("single-select");

​

// set the chart title

chart.title("How many pieces of pizza have they eaten?");

​

var tooltip = document.getElementById("tooltip");

​

/* show a custom tooltip

when the mouse is over a column */

chart.listen("pointMouseOver", function(e) {

​

  // show the tooltip

  tooltip.style.visibility = "visible"; 

​

  // set the text of the tooltip

  tooltip.innerHTML = data.row(e.pointIndex)[0] + " has eaten "

                    + data.row(e.pointIndex)[1] +

                    " pieces of pizza in total";

});

​

/* hide the custom tooltip

when the mouse is out of a column */

chart.listen("pointMouseOut", function() {

  tooltip.style.visibility = "hidden";

});

​

// set the position of custom tooltips

chart.listen("mouseMove", function(e) {

​

  var clientX = e["offsetX"];

  var clientY = e["offsetY"];

​

  tooltip.style.left = clientX + 20 + "px";

  tooltip.style.top = clientY + 10 + "px";

  tooltip.style.zIndex = 10000;

  tooltip.style.border = "solid black 2px";

});

​

// set the container id

chart.container("container");

​

// initiate drawing the chart

chart.draw();

});