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...