Chart tooltips with HTML layout

Select a theme:
                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/sea.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/samples/general-features/html-tooltip/tooltip-styles.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    anychart.onDocumentReady(function () {
	// set chart theme
anychart.theme('sea');
      // 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();
        }
      );
    });
  
</script>
</body>
</html>
Warning!

Chart tooltips with HTML layout

Chart tooltips with HTML layout
