Slicing off a pie chart can be useful if we need to distinguish a particular category from the rest. The sliced-off category displays a little outwards from the main chart.
In the following example, we will take a look at how we can slice off a particular category in pie charts. So modify the code from the previous example to slice off the MacOSX
category:
series: [{ name: 'Operating Systems', data: [ ['Windows', 88.19], { name: 'MacOSX', y: 9.22, sliced: true }, ['Linux', 1.58], ['Others', 1.01] ] }]
We replaced the array containing the category name and the value with an object in which we have explicitly defined these properties along with the sliced
property. By enabling the sliced
property, the category will be sliced off from the main chart.
The preceding snippet also shows the simplicity and flexibility of the Highcharts API. In most cases, where slicing is not required, we can define categories as an array containing the category name and its value. On the other hand, for more advanced modification, Highcharts provides us with an object, containing all the properties at our disposal.
A sliced-off chart will look like the following screenshot:
The point selection is turned off by default in a Highcharts configuration, but we can enable it to allow the slicing off of categories by selecting them. We can achieve this result by enabling the sliced
and selected
properties in the category while setting the allowPointSelect
property to true
in the plotOptions
component:
plotOptions: { pie: { dataLabels: { enabled: true }, allowPointSelect: true } }, series: [{ name: 'Operating Systems', data: [ ['Windows', 88.19], { name: 'MacOSX', y: 9.22, sliced: true, selected: true }, ['Linux', 1.58], ['Others', 1.01] ] }]
Now any category in the chart can be sliced off by selecting it.