Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    height: 450,
    backgroundColor: "transparent",
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: "pie",
    marginBottom: 150,
    animation: false,
    events: {
     
      load: function() {
          var chart = this,
          legend = chart.legend;
       // Legend hover show tooltip
        for (var i = 0, len = legend.allItems.length; i < len; i++) {
          (function(i) {
            function hovOn() {
              chart.update({
                  title: {
                      text: null
                  }
              });
              chart.tooltip.refresh(chart.series[0].points[i]);
            }
            function hovOff() {
              chart.tooltip.hide(0);
                  chart.update({
                      title: {
                          text: `<span><strong>Investment <br>Allocation<a href="#footnote"><sup>4</sup></a><strong></span>`,
                      }
                  });
            }
            var item = legend.allItems[i].legendItem;
            item.on('mouseover', function(e) {
              //show custom tooltip here
              hovOn()
            }).on('mouseout', function(e) {
              //show first slice tooltip on mouse out
              hovOff()
            });
            var item2 = legend.allItems[i].legendSymbol;
            item2.on('mouseover', function(e) {
              //show custom tooltip here
              hovOn()
            }).on('mouseout', function(e) {
              //show first slice tooltip on mouse out
              hovOff()
            });
          })(i);
        }
      },
    }
  },
  title: {
      useHTML: true,
      text: `<span><strong>Investment <br>Allocation<a href="#footnote"><sup>4</sup></a><strong></span>`,
      verticalAlign: 'middle',
      y: -50,
      style: {
          fontSize: '18px',
          fontFamily: 'Sanomat Web',
      }
  },
  yAxis: {
  },
  plotOptions: {
   ...