We can also choose to show two different pie charts in a single chart by adding two series. These two charts will appear side by side in a single container, although we can also modify their positions within the container to meet our needs. These types of charts are great for comparing the data of different series.

Consider the very first example of this chapter where we created a simple pie chart to show the market share of popular desktop operating systems. We will use the same series for the first pie chart and introduce a second series to show the market share of mobile operating systems:

series: [{
  name: 'Desktop OS Marketshare',
  center: ['25%', '50%'],
  size: '50%',
  data: [
    ['Windows', 88.19],
    ['MacOSX', 9.22],
    ['Linux', 1.58],
    ['Others', 1.01]
  ]
}, {
  name: 'Mobile OS Marketshare',
  center: ['75%', '50%'],
  size: '50%',
  data: [
    ['Android', 77.83],
    ['iOS', 17.8],
    ['Microsoft', 2.94],
    ['RIM', 0.72],
    ['Symbian', 0.71]
  ]
}]

We have centered the first pie chart at 25 percent along the horizontal and the second at 75 percent. The vertical alignment for both the pie charts is the same, that is, 50 percent along the vertical with respect to the container. Notice that the size of the container has been increased to 1000 px x 600 px to accommodate the two pie charts.

The following is a screenshot of a multi-pie chart:

So far in this chapter, we have learned about pie charts and their configuration options. We learned about creating simple pie charts, configuring them for drilldown, and even created two side-by-side pie charts in a single chart. In the following section, we will begin learning about donut charts.