html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

tooltip = $("<div class='custom-tooltip'></div>").css({

"position": "absolute",

"pointerEvents": "none",

"width": "100px",

"background": "#fff",

"padding": "4px",

"border": "solid black 2px",

"display": "none"

});

​

// data

var data = anychart.data.set([

["Velma", 10],

["Fred", 12],

["Daphne", 18],

["Shaggy", 6],

["Scooby", 46]

]);

​

​

// map data for the each series

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

​

// chart type

var chart = anychart.column(dataMapping);

​

// set data

var series = chart.getSeries(0);

series.tooltip(false);

​

// chart title

chart.title().useHtml(true);

chart.title('<span style="color:#545f69; font-size: 18px;">How many pieces of pizza have they eaten?</span>');

​

// switching the selection mode to single

chart.interactivity().selectionMode("singleSelect");

​

series.stroke(null);

​

// enable legend

chart.legend().enabled(false);

​

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

var clientX = e['offsetX'];

var clientY = e['offsetY'];

var $container = $(this.container().getStage().container());

​

if (!$container.find('.custom-tooltip').length) {

    $container.append(tooltip);

}

​

tooltip.css({"left": clientX + 20, "top": clientY + 10, "z-index": 10000});

});

​

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

tooltip.css({"display": "block"});

​

var ind = e.pointIndex;

tooltip.html(data.row(ind)[0] + " has eaten " + data.row(ind)[1] + " pieces of pizza in total");

});

​

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

tooltip.css("display", "none");

});

​

// draw

chart.container("container");

chart.draw();

});