html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // To work with the data adapter you need to reference the data adapter script file from AnyChart CDN

  // https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js

​

  // Load JSON data and create a chart by JSON data

  // The data used in this sample can be obtained from the CDN

  // https://cdn.anychart.com/samples-data/general-features/html-tooltip/data.json

  anychart.data.loadJsonFile(

    'https://cdn.anychart.com/samples-data/general-features/html-tooltip/data.json',

    function (data) {

      // create and setup column chart

      var chart = anychart.column().title('Smartphone sales by Month');

​

      // set X axis labels font size

      var labels = chart.xAxis().labels();

      labels.fontSize(11);

​

      // create dataset and map it for column chart

      var dataSet = anychart.data.set(data);

      var columnData = dataSet.mapAs({

        x: 'month',

        value: 'total'

      });

​

      // create column series

      var series = chart.column(columnData);

​

      // get tooltip

      var tooltip = series.tooltip();

​

      // enable html mode and format title and content of tooltip

      tooltip

        .useHtml(true)

        .titleFormat('<h3>{%X}</h3>')

        .format(

          '<div>Total: {%Value}</div><div id="tooltip-container"></div>'

        );

​

      // create 3D pie chart with transparent background for tooltip

      var tooltipChart = anychart.pie3d();

      tooltipChart.height(150);

      tooltipChart.background('transparent');

      tooltipChart.legend().fontColor('#333');

​

      // listen MouseOver event on column series

      series.listen('pointMouseOver', function (e) {

        // get data for tooltip chart

        tooltipChart.data(e.iterator.get('data'));

      });

​

      // draw tooltip chart in it's content element if tooltip DOM is rendered

      tooltip.onDomReady(function () {

        tooltipChart.container(this.contentElement);

        tooltipChart.draw();

      });

​

      // Prevent overriding tooltip content

      tooltip.onBeforeContentChange(function () {

        return false;

      });

​

      // set container id for the chart

      chart.container('container');

​

      // initiate chart drawing

      chart.draw();

    }

  );

});