Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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

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

CSS

body{
background:black
}

JavaScript

Highcharts.chart('container', {
    chart: {
      height: 460,
      backgroundColor: "transparent",
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: "pie",
      marginBottom: 80,
      animation: false,
      events: {

        redraw: function() {
          var chart = this,
            legend = chart.legend,
            point = chart.series.chart;

          // starte with first slice hovered
          chart.series[0].setState = function() {};
          chart.series[0].points[0].onMouseOver();


          // Legend hover show tooltip
          for (var i = 0, len = legend.allItems.length; i < len; i++) {
            (function(i) {
              function hovOn() {
                chart.tooltip.refresh(chart.series[0].points[i]);
                chart.series[0].setState = function() {};
                console.log("ledg on")
              }

              function hovOff() {
                chart.tooltip.refresh(chart.series[0].points[0]);
                chart.series[0].setState = function() {};
                chart.series[0].points[0].onMouseOver();
                console.log("ledg off")
              }

              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);
          }
          console.log("re ")
          for (var i = 0, len = legend.allItems.length; i < len; i++) {
            (function(i) {
             ...