Highcharts Demo

author(s): Torstein Hønsi

by Dogbert

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<!-- <script src="https://code.highcharts.com/modules/exporting.js"></script> -->
<script src="https://code.highcharts.com/modules/drilldown.js"></script>


<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie',
      options3d: {
        enabled: true,
        alpha: 45
      }
    },
    title: {
      text: 'Contents of Highsoft\'s weekly fruit delivery'
    },
    subtitle: {
      text: '3D donut in Highcharts'
    },
    plotOptions: {
      pie: {
        innerSize: 100,
        depth: 45
      }
    },
    series: [{
      name: 'Brands',
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        drilldown: 'Microsoft Internet Explorer'
      }, {
        name: 'Chrome',
        y: 24.03,
        drilldown: 'Chrome'
      }, {
        name: 'Firefox',
        y: 10.38,
        drilldown: 'Firefox'
      }, {
        name: 'Safari',
        y: 4.77,
        drilldown: 'Safari'
      }, {
        name: 'Opera',
        y: 0.91,
        drilldown: 'Opera'
      }, {
        name: 'Proprietary or Undetectable',
        y: 0.2,
        drilldown: null
      }]
    }],
    drilldown: {
      series: [{
        name: 'Microsoft Internet Explorer',
        id: 'Microsoft Internet Explorer',
        data: [
          ['v11.0', 24.13],
          ['v8.0', 17.2],
          ['v9.0', 8.11],
          ['v10.0', 5.33],
          ['v6.0', 1.06],
          ['v7.0', 0.5]
        ]
      }, {
        name: 'Chrome',
        id: 'Chrome',
        data: [
          ['v40.0', 5],
          ['v41.0', 4.32],
          ['v42.0', 3.68],
          ['v39.0', 2.96],
          ['v36.0', 2.53],
          ['v43.0', 1.45],
          ['v31.0', 1.24],
          ['v35.0', 0.85],
          ['v38.0', 0.6],
          ['v32.0', 0.55],
          ['v37.0', 0.38],
          ['v33.0', 0.19],
          ['v34.0', 0.14],
          ['v30.0', 0.14]
        ]
      }, {
        name: 'Firefox',
        id: 'Firefox',
        data: [
          ['v35', 2.76],
          ['v36', 2.32],
          ['v37', 2.31],
          ['v34', 1.27],
          ['v38', 1.02],
          ['v31', 0.33],
    ...