Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'pie',
  },
  plotOptions: {
    pie: {
      type: 'pie',
      innerSize: '80%',
      allowPointSelect: true,
      slicedOffset: 0,
      states: {
        hover: {
          halo: null,
          brightness: 0,
        },
      },
      point: {
        events: {
          mouseOver: (obj) => {
            obj.target.graphic.attr({
                'stroke-width': 50,
                stroke: obj.target.color,
                zIndex: 3,
                filter: 'drop-shadow(0 0 10px black)'
              }).css({
                borderRadius: 20
              })
              .add();
          },
          mouseOut: (obj) => {
            obj.target.graphic.attr({
                'stroke-width': 1,
                stroke: obj.target.color,
                filter: 'transparent'
              }).css({
                borderRadius: 0
              })
              .add();
          },
        }
      }

    }
  },
  series: [{
    data: [{
        y: 4,
      },
      {
        y: 3,
      },
      {
        y: 8,
      },
    ]
  }],

});