In Chapter 3, Line and Spline Charts, we combined the line and the column chart. In the following example, we will take a look at how to combine a pie chart with a column and line chart to present data via three different chart types for greater data visualization.

Consider the example of fuel consumption by the United States, China, and the European Union in the year 2012 by fuel type. First, the data for the first two countries will be plotted by the column graph whereas the data for the EU will be visualized by the line chart. We will then plot the total fuel consumption by type using a pie chart that will appear along with the main chart.

The following is the code for the line and column chart combination:

(function() {
  $( '#chart_container' ).highcharts({
    title: {
      text: 'Fuel Consumption by Type for the Year 2012'
    },
    subtitle: {
      text: 'Source: <a href="http://bp.com">BP</a>',
      useHTML: true
    },
    xAxis: {
      categories: ['Oil', 'Natural Gas', 'Coal', 'Nuclear Energy', 'Hydroelectricity', 'Renewable']
    },
    yAxis: {
      title: {
        text: 'Million Metric Tons of Oil Equivalent'
      }
    },
    series: [{
      name: 'U.S.',
      type: 'column',
      data: [819.9, 654, 437.4, 183.2, 63.2, 50.7]
    }, {
      name: 'China',
      type: 'column',
      data: [483.7, 129.5, 1873.3, 22, 194.8, 31.9]
    }, {
      name: 'EU',
      type: 'line',
      data: [618.8, 399.7, 293.4, 199.9, 76.1, 97.7]
    }]
  });
})();

Instead of giving a chart type directly to the chart itself, we set the series type on individual series. The first two series for the United States and China are set as columns and the series for the EU is of the line type. Since both column and line charts require categories on the x axis, we defined our categories array, that is, the fuel types in the xAxis component.

The following is the combination produced by the preceding code:

To introduce a pie chart that shows the total fuel consumption by type, we need another series of type pie. Refer to the following code:

{
  name: 'Total',
  type: 'pie',
  data: [
    {name: 'Oil', y: 1922.4},
    {name: 'Nuclear Energy', y: 405.1},
    {name: 'Coal', y: 2604.1},
    {name: 'Hydroelectricity', y: 334.1},
    {name: 'Natural Gas', y: 1183.2},
    {name: 'Renewable', y: 180.3}
  ],
  size: '80%',
  center: ['80%', '40%']
}

We also need to configure the data labels to show inside pie slices. We can do it by accessing the dataLabels object inside the Total series or by modifying the plotOptions.pie.dataLabels object:

plotOptions: {
  pie: {
    dataLabels: {
      distance: -45,
      color: '#ffffff'
    }
  }
}

This will bring the pie chart in the existing combination, as follows: