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 is the horizontal rotation. Both these properties accept numbers as their values and both have a default value of 0.

The preceding modification will create a 3D look as follows:

The depth properties control the depth of the chart as well as the columns along the z axis. These depth properties can be defined on options3d and plotOptions.column. In conjunction with these properties, column charts can also be given the plotOptions.column.groupZPadding property that controls the distance between the outer edge of the chart and the column groups. The default values of the options3d.depth and plotOptions.column.depth properties are 100 and 25, respectively.

Let's modify the plotOptions component and the options3d object literal to see how the previously mentioned properties work:

chart: {
  type: 'column',
  options3d: {
    enabled: true,
    alpha: 20,
    beta: 25,
    depth: 120
  }
},
plotOptions: {
  column: {
    depth: 50,
    groupZPadding: 50
  }
}

Modifying the values of plotOptions.column.depth and options3d.depth to be larger than their default values caused the depths of the columns and the chart to increase. The default value of plotOptions.column.groupZPadding is 0, which aligns the columns with the outer edge of the chart. However, increasing its value pushed the columns inwards into the chart along the z axis.

Likewise, column charts with multiple series and stacking can also incorporate the 3D view. The following screenshot of two 3D charts is produced by customizing the code of the previous examples of this chapter. You can find the full code in the accompanying code examples of this book:

Modifying the viewing frame

Highcharts also allows us to modify the viewing frame of a 3D chart. This includes customizing the back, bottom, and side panels of the virtual box in which the 3D chart is present. We can do so by accessing options3d.frame as well as the side, bottom, and back properties:

frame: {
  back: {
    color: '#c2dbf2',
    size: 5
  },
  bottom: {
    color: '#adc4d9',
    size: 5
  },
  side: {
    color: '#b8cfe5',
    size: 5
  }
}

This code will modify the look of the view box, as shown in the following screenshot:

The size property controls the thickness, while the color property determines the color of its respective panel.

Note

To learn more about the 3D features of Highcharts, check out the official documentation at http://api.highcharts.com/highcharts#chart.options3d.