In a previous example, we created a pie chart with a drilldown feature; that is, when a user clicks on the parent category, he is taken to another chart showing the breakdown of that parent category in more detail. If we want to show this detailed breakdown of data right in the main chart, we will need to use a donut chart. This is where donut charts are most useful, as they display the breakdown of the parent category without the need for the drilldown feature.

Consider the example of the top three car manufacturers (by sales) in the United States. Their sales for December 2013 to December 2014 for their best-seller models are as follows:

We can visualize this data with the help of a pie chart using the following code:

(function() {
  $( '#chart_container' ).highcharts({
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Car Sales for December 2013 - 2014'
    },
    subtitle: {
      text: 'Source: <a href="http://www.businessinsider.com/best-selling-cars-in-december-2013-2014-1?op=1">Business Insider</a>',
      useHTML: true
    },
    plotOptions: {
      pie: {
        dataLabels: {
          enabled: false
        },
        borderColor: 'rgba(255, 255, 255, 0.2)'
      }
    },
    series: [{
      name: 'Car Manufacturers',
      innerSize: '60%',
      dataLabels: {
        enabled: true,
        distance: -40,
        color: '#ffffff'
      },
      data: [
        {name: 'Chevy', y: 93460, color: 'rgba(135, 43, 36, 1)'},
        {name: 'Ford', y: 154491, color: 'rgba(38, 85, 182, 1)'},
        {name: 'Honda', y: 90080, color: 'rgba(104, 135, 36, 1)'}
      ]
    }]
  });
})();

Please note that we have used a pie chart as our chart type since donuts are also pie charts, but with a different appearance.

This will create a simple pie chart as follows:

Notice the use of the innerSize property that created an empty space in the middle of the chart when we set it to 60%. We will fit the series containing detailed data of sales inside this empty space by utilizing its size property. Insert the following series inside the series array:

{
  name: 'Car Models',
  size: '54%',
  data: [
    {name: 'Malibu', y: 15493, color: 'rgba(135, 43, 36, 0.9)'},
    {name: 'Equinox', y: 17212, color: 'rgba(135, 43, 36, 0.9)'},
    {name: 'Cruze', y: 18162, color: 'rgba(135, 43, 36, 0.9)'},
    {name: 'Silverado', y: 42593, color: 'rgba(135, 43, 36, 0.9)'},
    {name: 'Focus', y: 15569, color: 'rgba(38, 85, 182, 0.9)'},
    {name: 'Explorer', y: 15660, color: 'rgba(38, 85, 182, 0.9)'},
    {name: 'Escape', y: 24262, color: 'rgba(38, 85, 182, 0.9)'},
    {name: 'Fusion', y: 24408, color: 'rgba(38, 85, 182, 0.9)'},
    {name: 'F-Series', y: 74592, color: 'rgba(38, 85, 182, 0.9)'},
    {name: 'CR-V', y: 28759, color: 'rgba(104, 135, 36, 0.9)'},
    {name: 'Civic', y: 29000, color: 'rgba(104, 135, 36, 0.9)'},
    {name: 'Accord', y: 32321, color: 'rgba(104, 135, 36, 0.9)'}
  ]
}

Note that we have given car manufacturers and their respective models the same color to distinguish them from other manufacturers. The only difference in the colors of car manufacturers and their car models is that we have set the alpha value of the car models to 0.9. This is to create a visual relationship between the car models and their manufacturers.

Since we have given the second series a size of 54%, it will shrink to fit inside the empty space, as shown in the following chart. The categories in the inner chart will align with their respective parent categories in the outer chart since their values total to the value of their respective parent category.