Pie charts are a special kind of chart as they don't have x and y axes; rather, they are circular charts divided into slices where each slice represents a proportion of the actual data. They are most suitable for visualizing data that is meant to be shown proportionally or in percentages. The percentage of each category is usually shown next to the corresponding slice.

To gain more insight into a pie chart and its various configuration options that Highcharts provides, we are going to plot a pie chart representing the market share of desktop operating systems:

(function() {
  $( '#chart_container' ).highcharts({
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Desktop Operating Systems Marketshare'
    },
    subtitle: {
      text: 'StatCounter'
    },
    tooltip: {
      valueSuffix: '%'
    },
    series: [{
      name: 'Operating Systems',
      data: [
        ['Windows', 88.19],
        ['MacOSX', 9.22],
        ['Linux', 1.58],
        ['Others', 1.01]
      ]
    }]
  });
})();

Notice that we haven't defined the axes in the preceding code but rather gave data points in terms of an array. This array contains the name of the category as the first element and its quantity as the second one. The proportion of each category will be calculated by summing up all the values and then dividing individual values by this sum. Each slice in the circle will represent the proportion or percentage of its respective category.

The preceding code will produce the following pie chart:

We have also configured the tooltip to append a % sign at the end of the category value when someone hovers over the chart:

The tooltip now shows the percentage sign prefixed with the percentage number.

It's worth mentioning here that we don't need to provide percentages as data. We could also provide absolute numbers and then show their relative percentages in data labels and tooltips using the pointFormat property, as shown in the following code:

tooltip: {
  pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
},
dataLabels: {
  pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
},

This will ensure that the tooltip and data labels show the relative percentages of the data points instead of their actual numbers.

Having learned about basic pie chart construction, we will now learn about slicing it off in the next section.