Highcharts Demo

author(s): Torstein Hønsi

by Haze32

HTML

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

JavaScript

// Build the chart
Highcharts.chart('container', {
  chart: {
    type: 'pie',
    animation: false,
    height: 400,
    backgroundColor: "transparent",
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    marginBottom: 100,
    events: {
      load: function() {
        var chart = this,
          legend = chart.legend;

        chart.tooltip.refresh(chart.series[0].points[0]);

        this.series[0].points[0].graphic.attr({
          r: this.series[0].points[0].shapeArgs.r + 10,
        });


        for (var i = 0, len = legend.allItems.length; i < len; i++) {
          (function(i) {

            var item = legend.allItems[i].legendItem;
            item.on('mouseover', function(e) {
              //show custom tooltip here
              chart.tooltip.refresh(chart.series[0].points[i]);


              chart.series[0].points[0].update({
                opacity: .5
              });
              chart.series[0].points[i].update({
                opacity: 1
              });

              chart.tooltip.refresh(chart.series[0].points[i]);
              
              chart.series[0].points[0].graphic.attr({
                r: chart.series[0].points[i].shapeArgs.r + 0,
              });
              chart.series[0].points[i].graphic.attr({
                r: chart.series[0].points[i].shapeArgs.r + 10,
              });

            }).on('mouseout', function(e) {
              chart.series[0].points[i].update({
                opacity: .5
              });
              chart.series[0].points[0].update({
                opacity: 1
              });
              //show first slice tooltip
              chart.tooltip.refresh(chart.series[0].points[0]);
            });
          })(i);
        }

      },
      redraw: function() {
        this.tooltip.refresh(this.series[0].points[0]);
        
        this.series[0].points[0].graphic.attr({
          r: this.series[0].points[0].shapeArgs.r + 10,
        });
      }
    }
  },
...