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.