Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(document).ready(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'pie'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: false
        },
      }
    },
    series: [{
      size: '100%',
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        dataLabels: {
          enabled: true,
          distance: -50
        }
      }, {
        name: 'Chrome',
        y: 24.03,
        color: 'rgba(0,0,0,0)',
      }, {
        name: 'Firefox',
        y: 10.38,
        color: 'rgba(0,0,0,0)'
      }, {
        name: 'Safari',
        y: 4.77,
        color: 'rgba(0,0,0,0)'
      }]
    }, {
      size: '80%',
      borderColor: null,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        color: 'rgba(0,0,0,0)'
      }, {
        name: 'Chrome',
        y: 24.03,
        dataLabels: {
          enabled: true,
          distance: -30
        }
      }, {
        name: 'Firefox',
        y: 10.38,
        color: 'rgba(0,0,0,0)'
      }, {
        name: 'Safari',
        y: 4.77,
        color: 'rgba(0,0,0,0)'
      }]
    }, {
      size: '60%',
      borderColor: null,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        color: 'rgba(0,0,0,0)'
      }, {
        name: 'Chrome',
        y: 24.03,
        color: 'rgba(0,0,0,0)'
      }, {
        name: 'Firefox',
        y: 10.38,
        dataLabels: {
          enabled: true,
          distance: -10
        }
      }, {
        name: 'Safari',
        y: 4.77,
        color: 'rgba(0,0,0,0)'
      }]
    }, {
      size: '40%',
      borderColor: null,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        color: 'rgba(0,0,0,0)'
      }, {
        name: 'Chrome',
        y: 24.03,
        color: 'rgba(0,0,0,0)'
      }, {
        name: 'Firefox',
        y: 10.38,
        color:...