html, body, #container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

.anychart-tooltip {

  background-color: white;

  border-color: #455a64;

  border-style: solid;

  border-width: 3px;

  color: #455a64;

}

anychart.onDocumentReady(function () {

​

  // create data

  data = anychart.data.set([

    ["2000", 10048, 2600, 3200, 2159, 2089],

    ["2001", 10938, 2367, 1989, 2383, 4199],

    ["2002", 9989, 2156, 2399, 2867, 2567],

    ["2003", 10226, 2398, 2225, 3010, 2593],

    ["2004", 11004, 2851, 3007, 2805, 2341],

    ["2005", 10934, 3400, 2105, 2563, 2866],

    ["2006", 11275, 2878, 2933, 3561, 1903],

    ["2007", 11945, 2959, 3855, 3109, 2022],

    ["2008", 12245, 4001, 2156, 3928, 2160],

    ["2009", 12056, 1995, 2057, 4902, 3102],

    ["2010", 11734, 2584, 3166, 3101, 2883],

    ["2011", 12337, 3106, 2845, 2933, 3453],

    ["2012", 12761, 3296, 2655, 3144, 3666],

    ["2013", 13390, 2611, 4194, 3206, 3379],

    ["2014", 13818, 3000, 2599, 4107, 4112],

    ["2015", 13188, 3199, 2564, 3118, 4307]

  ]);

​

  // map the data

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

​

  // create a column chart

  var chart = anychart.column();

​

  // set the data

  var column = chart.column(dataMapping);

​

  // set the chart title

  chart.title().useHtml(true);

  chart.title("Tooltip: HTML (Chart as Tooltip)<br><br><span style='font-style:italic'>Sales Volume</span>");

​

  // configure tooltips

  chart.tooltip().useHtml(true);

  chart.tooltip().separator(false);

  chart.tooltip().title(false);

​

  var tooltipChart = null;

​

  /* listen to the pointMouseOver event

  and update the tooltip chart or create one */

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

    // get the data for the current point

    var index = e.pointIndex;

    var dataRow = data.row(index);

​

    /* create a tooltip chart

    or update the chart created before */

    if (tooltipChart == null) tooltipChart = createChart();

    tooltipChart.data([

      {x: "John", value: dataRow[2]},

      {x: "James", value: dataRow[3]},

      {x: "Peter", value: dataRow[4]},

      {x: "Mathew", value: dataRow[5]}

    ]);    

    tooltipChart.title(dataRow[0] + ": Sales per Employee");

  });

​

  /* listen to the onDomReady event

  and draw a tooltip chart */

  chart.tooltip().onDomReady(function() {

​

    // configure the contentElement div of the tooltip

    this.contentElement.style.width = "200px";

    this.contentElement.style.height = "140px";

​

    /* assign the contentElement div

    as a container for the tooltip chart */

    tooltipChart.container(this.contentElement);

    console.log(this);

​

    // initiate drawing the chart

    tooltipChart.draw();

  });

​

  /* prevent the content of the contentElement div

  from being overridden by the default formatter */

  chart.tooltip().onBeforeContentChange(function() {

      return false;

  }); 

​

  // set the container id

  chart.container("container");

​

  // initiate drawing the chart

  chart.draw();

});

​

// create a tooltip chart

function createChart() {

​

  // create a bar chart

  var chart = anychart.bar();

​

  // configure axes and labels

  chart.xAxis().stroke(null).ticks(false);

  chart.xAxis().labels().fontSize(10);

  chart.yAxis().labels().fontSize(10);

​

  // set padding

  chart.padding([0, 12, 0, 0]);

​

  // configure the chart title

  chart.title().fontSize(12);

​

  return chart;

}