Fancy Donut Highcharts

by Amy L

HTML

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

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

JavaScript

var _donutChartPercentageSize = 55;
var _selectedCategoryPoint, _selectedCategoryLabel, _selectedCategoryBg;
var _initialChartLoad = true;

$(function() {
  var _chart = Highcharts.chart($('#container')[0], {
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    chart: {
      events: {
        load: function() {

          _initialChartLoad = true;
          $(window).resize(function() {
            if (_selectedCategoryPoint) {
              _selectedCategoryPoint.setState();
            }
            if (!t) {
              t = window.setTimeout(function() {
                _chart.reflow();
                if (_selectedCategoryLabel) {
                  _selectedCategoryLabel.destroy();
                  _selectedCategoryLabel = null;
                }
                if (_selectedCategoryBg) {
                  _selectedCategoryBg.destroy();
                  _selectedCategoryBg = null;
                }
                if (_selectedCategoryPoint) {
                  _selectedCategoryPoint.firePointEvent('mouseOver');
                  _selectedCategoryPoint.setState('hover');
                }
                window.clearTimeout(t);
                t = null;
              }, 30);
            }
          });
        }
      }
    },
    title: {
      text: ''
    },
    xAxis: {
      categories: [],
      labels: {
        enabled: false,
        text: null
      },
      title: {
        text: null
      }
    },
    yAxis: {
      labels: {
        enabled: false,
        text: null
      },
      title: {
        text: null
      }
    },
    plotOptions: {
      pie: {
        borderWidth: 0,
        shadow: true,
        size: '100%',
        startAngle: 0,
        endAngle: 360,
        center: ['50%', '50%'],
        dataLabels: {
          enabled: false
        },
        point: {
          events: {
            mouseOver: function() {
              var point = this;
              _selectedCategoryPoint = point;
 ...