O'Reilly logo

Highcharts Essentials by Bilal Shahid

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drilling down the pie chart

Just as we drilled down column charts, pie charts can also be drilled down to show a particular category in more detail.

In the following code, taken from the previous example, we drill down the generic Windows category to show a different version of Windows being used:

series: [{
  name: 'Operating Systems',
  data: [
    {
      name: 'Windows',
      y: 88.19,
      drilldown: 'windows-versions'
    },
    ['MacOSX', 9.22],
    ['Linux', 1.58],
    ['Others', 1.01]
  ]
}],
drilldown: {
  series: [{
    name: 'Windows versions',
    id: 'windows-versions',
    data: [
      ['Win 7', 55.03],
      ['Win XP', 15.83],
      ['Win Vista', 3.59],
      ['Win 8', 7.56],
      ['Win 8.1', 6.18]
    ]
  }]
}

Be sure to include the Highcharts-4.x.x/js/modules/drilldown.js file before the highcharts.js file, as shown ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required