Drill down

For full detailed documentation and more samples of the drilldown feature, see the Highcharts API.

Since version 3.0.8, Highcharts has built-in support for drilldown. By giving a point configuration a drilldown option that corresponds to a series configuration in the drilldown.series array, the point is linked to a hidden series. When the point is clicked, this series is loaded in the chart and replaces the existing series. For column, bar and pie series, an animation occurs to help visualize that the single clicked point is extracted into a drilldown series. Multiple levels of drilling can be applied by chaining points to series.

Basic setup

For a basic setup, the drilldown series are defined in a separate array under the drilldown configuration. Each series configuration is given an id, which is used for the drilldown parent point to identify its series. 

series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}

See it live on jsFiddle.

Async setup

In many cases you may want to load the drilldown series dynamically. In this case we set the point.drilldown option to true, and use the chart's drilldown event to load the drilldown series configuration based on the clicked point. When the series data arrives, we add it by calling the Chart.addSeriesAsDrilldown method.

See the async drilldown demo.