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 in the following code:
<script src="/js/highcharts.js"></script> <script src="/js/modules/drilldown.js"></script>
As mentioned in Chapter 2, Column and Bar Charts, not including the Highcharts-4.x.x/js/modules/drilldown.js file will cause the drilldown feature not to work. This will not produce any errors, hence making debugging very difficult.
We have specified the drilldown property for the series we want to drilldown. The drilldown property is the ID of the drilldown series. Now, when you click on the Windows series in the chart, you will be taken to the drilled down pie chart.
You can go back to the main chart by clicking on the Back to Browser Share button at the top-right corner of the chart.
By default, the back button will display text in the Back to {Parent Series} format. You can modify it by accessing the drillUpText property in the lang component:
lang: {
drillUpText: 'Back to main chart'
}The lang component is where we define the language settings and the text for different scenarios. We will look at the lang component in more detail in Chapter 7, Theming with Highcharts, although you can always refer to the official documentation at http://api.highcharts.com/highcharts#lang.
The position and appearance of the button can also be customized by modifying various properties in the drilldown.drillUpButton component:
drillUpButton: {
position: {
x: 10,
y: -20,
align: 'left',
verticalAlign: 'bottom'
},
theme: {
fill: '#f28149',
stroke: '#f27130',
r: 5,
style: {
color: '#ffffff'
},
states: {
hover: {
fill: '#f26118',
stroke: '#f26118'
}
}
}
}The theme supports various SVG properties such as fill, stroke, stroke-width, and r (for radius). The button state for a mouse hover is defined inside the states element.
The following screenshot shows the customized button:
Pie chart is also supported by the Highcharts 3D module. In the following code, we will take data from the previous example. The data shows the breakdown of the market share of the Windows operating system.
The plotOptions component and the chart.options3d object are as follows:
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 60,
beta: 0
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true
},
allowPointSelect: true,
depth: 50
}
}This will produce the following 3D pie chart: