Highcharts Demo

author(s): Torstein Hønsi

by Vijay Kadam

HTML

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

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

JavaScript

// Create the chart
Highcharts.chart('container', {
        chart: {
          type: 'pie',
          events: {
            drilldown: function (event) {
            console.log("Redirect now: driildown");
            }
          }
        },
        plotOptions: {
          series: {
            cursor : 'pointer'
          },
          dataLabels: {
            enabled: true,
            format: '{point.name}: {point.y:.1f}%'
          },
          pie: {
            startAngle: -90,
            endAngle: 90,
            center: ['50%', '75%']
        }
        },
        tooltip: {
          headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
          pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> ({point.percentage:.2f}%)<br/>'
        },
        series: [
    {
    		"type": "pie",
        "innerSize": "50%",
      "name": "status",
      "data": [
        {
          "name": "INMAINTANANCE",
          "y": 30,
          "id": "INMAINTANANCE",
          "drilldown": true
        },
        {
          "name": "INUSE",
          "y": 20,
          "id": "INUSE",
          "drilldown": true
        },
        {
          "name": "INSTOCK",
          "y": 50,
          "id": "INSTOCK",
          "drilldown": true
        },
        {
          "name": "RETIRED",
          "y": 70,
          "id": "RETIRED",
          "drilldown": true
        }
      ]
    }
  ]
    });