Creating 3D column charts

Along with many new features, Highcharts 4 comes with a long-awaited feature of creating 3D charts. With the new 3D module, column, pie, and scatter charts now support the 3D view. This module enables us to define various properties for the 3D view including the rotation axes and depths.

Note

In order to plot 3D charts, you need to include the 3D module, highcharts-4.x.x/js/highcharts-3d.js, into your page after the main highcharts.js file.

Consider the first example from this chapter in which we plotted the data of the London Olympics 2012 medal table showing the medal count of the highest-achieving countries. We will copy the same code and modify chart.options3d along with plotOptions.column to set up the 3D view:

hart: {
  type: 'column',
  options3d: {
    enabled: true,
    alpha: 20,
    beta: 25
  }
}

First, we enabled the 3D view in options3d. Then, we define the angles at which the chart will be viewed. The alpha property is the vertical rotation, while beta...