Chapter 9. 3D Charts

3D charts have been the most long awaited and the most desired feature in Highcharts. A feature that has been in the subject of heated debate within the users' community. There are users who agree, and those that disagree with the use of 3D charts. The pro camp argue for the use of 3D charts, for example in sales and marketing reports or infographics posters. The con party argue that 3D charts are misleading in terms of accuracy in data visualization and comparison, so the development resources should be focused elsewhere. As for Highcharts, it takes the pro-choice direction.

This chapter focuses on the basics of 3D configuration and shows a gallery of charts presented in 3D, as well as several specific options in each supported series. In this chapter, we will learn:

• What a 3D chart in Highcharts is and isn't

• Experimenting with 3D chart orientation: alpha, beta, depth, and viewDistance

• Configuring the 3D chart background

• Plotting the column, pie, donut, and scatter series...

What a Highcharts 3D chart is and isn't

At the time of writing, the 3D chart feature is to display the 2D charts in a real 3D presentation, that is, we can rotate and tilt the charts in different dimensions and adjust the view distance. The 3D feature is currently only available for the column, pie, and scatter series.

What 3D charts cannot do is to construct a real three dimensional, x, y, and z axes chart, except for the scatter plot; we will even see some shortcomings in the scatter plot later. As this is the first major release of 3D charts, this limitation may be short lived.

Experimenting with 3D chart orientation

To enable the 3D feature, we first need to include the extension as follows:

<script 
 src="http://code.highcharts.com/highcharts-3d.js"></script>

In Highcharts, there are two levels of 3D options: chart and series. The chart level options are located in chart.options3d, which mainly deals with the orientation and the frame around the plotting area, whereas the 3D options for the series remain in the usual plotOptions area, such as plotOptions.column.depth.

Currently, Highcharts supports 2 axles of rotation: horizontal and vertical, which are the alpha and beta options in chart.options3d respectively. The values for these options are in degrees. The following diagram illustrates with arrows the direction of chart rotation as the degree value increases and decreases:

Alpha and beta orientations

In the previous diagram, we showed the direction of orientation. Let's experiment with a column chart. We are going to use a chart from Chapter 4, Bar...

Configuring the 3D chart background

Instead of having a white background with dark labels, let's replace the side, bottom, and back frames around the plot area with different settings. In Highcharts, we can specify the color and thickness of these frames, as follows:

                   options3d: {
                       ....,
                       frame: {
                            back: {
                                color: '#A3A3C2',
                                size: 4
                            },
                            bottom: {
                                color: '#DBB8FF',
                                size: 10
                            },
                            side: {
                                color: '#8099E6',
                                size: 2
                            }
                       }
                   }

Meanwhile, we also change the data label color to white which contrasts nicely with the new background color:

Note that if we...

Plotting the column, pie, donut, and scatter series in 3D charts

In this section, we will plot a gallery of column, pie, donut, and scatter series which are currently supported for 3D presentation. We will also examine the 3D options specific to each series. Some of the examples used here are taken from previous chapters.

3D columns in stacked and multiple series

Let's start with a multi-series stacked column chart embedded with the options3d setting:

                options3d: {
                    alpha: 10,
                    beta: 30,
                    enabled: true
                }

Here is what a multi-series grouped and stacked 3D columns chart looks like:

Column depth and Z-padding

Notice from the preceding chart, the sides of the UK/Germany stacked columns are covered by the S. Korea/Japan columns. Suppose that we want to show part of the sides of the UK/Germany columns. In order to do that, we can reduce the thickness of the S. Korea/Japan columns with the plotOptions.column.depth...

Navigating with 3D charts

In this section, we will investigate how you can interact with 3D charts. In Chapter 2, Highcharts Configurations, we have already explored the drill down feature and we will revisit it briefly in 3D charts. Another interaction specific to 3D charts is the impressive click-and-drag feature.

Drilldown 3D charts

Let's convert our previous drill down example into a 3D chart. First, we add the options3d option (and other positioning options):

              options3d: {
                  enabled: true,
                  alpha: 25,
                  beta: 30,
                  depth: 30,
                  viewDistance: 100
              },

Here, we have our top level 3D chart:

The next step is to improve our drill down pie chart in 3D with different orientation. Since the top level column is already configured in 3D, the drill down pie chart (defined in the drilldown.series option with matching id value) will also follow suit. However, we won't notice the pie in 3D because...

Summary

In this chapter, we learned how to create 3D column, scatter, and pie charts, and how to manipulate the orientation and configurations specific to each series. We tested these options by producing a gallery of 3D charts. On top of that, we explored a number of user interactions for 3D charts in Highcharts.

In the next chapter, we will explore the Highcharts APIs, which are responsible for making a dynamic chart, such as using Ajax queries to update the chart content, accessing components in Highcharts objects, and exporting charts to SVG.