Toggle navigation Highcharts
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Home
  • Products
    • Highcharts
    • Highstock
    • Highmaps
    • Mobile
    • Highcharts Cloud
    • Highcharts Editor
    • Wrappers
    • Plugins
  • Demo
    • Highcharts demos
    • Highstock demos
    • Highmaps demo
  • Docs
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
  • Support
    • Support
    • Download
  • Blog
  • Community
    • Customer Showcase
    • Chart Code Showcase
    • Contribute
  • Buy
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
Back to docs
  • Getting Started
    • System requirements
    • Installation
    • Install from npm
    • Install from Bower
    • Your first chart
    • How to set options
    • Frequently asked questions
    • How to create custom Highcharts files
    • Optional Dependencies
    • Compatibility
  • Chart concepts
    • Understanding Highcharts
    • Understanding Highstock
    • Title and subtitle
    • Axes
    • Series
    • Tooltip
    • Legend
    • Range selector
    • Navigator
    • Scrollbar
    • Plot bands and plot lines
    • Zooming
    • Labels and string formatting
    • Drilldown
    • 3D charts
    • Accessibility
    • Responsive
  • Maps
    • Getting started
    • Map navigation
    • Color axis
    • Map collection
    • Custom maps
    • Custom GeoJSON maps
    • Adding points and lines
    • Latitude/longitude
  • Chart and series types
    • Chart types
    • Combining chart types
    • Angular gauges
    • Area chart
    • Areaspline chart
    • Axis resizer
    • Bar chart
    • Bell curve series
    • Box plot series
    • Bullet chart
    • Candlestick chart
    • Column chart
    • Error bar series
    • Flag series
    • Funnel series
    • Heat map series
    • Histogram Series
    • Line chart
    • OHLC chart
    • Parallel Coordinates Chart
    • Pareto Chart
    • Pie chart
    • Polar chart
    • Range series
    • Sankey diagram
    • Scatter chart
    • Spline chart
    • Stream graph
    • Sunburst series
    • Technical Indicator Series
    • Tilemap Series
    • Treemap
    • Variable Radius Pie chart
    • Variwide chart
    • Vector plot
    • Waterfall series
    • Wind barbs series
    • Word Cloud series
    • X-range series
  • Advanced chart features
    • Annotations module
    • Annotations and Fibonacci Retracements
    • Boost module
    • Custom technical indicators
    • Data grouping
    • Freeform drawing
    • Internationalization
    • Stacking charts
  • Export module
    • Export module overview
    • Client side export
    • Setting up your own server
    • Command Line Rendering
    • Terms
  • Working with data
    • Data intro
    • Data module
    • Custom preprocessing
    • Live data
    • Data from a database
    • Getting data across domains (JSONP)
  • Chart design and style
    • Design and style
    • Colors
    • Themes
    • Styled mode
    • Custom themes in Styled Mode
    • Gradients, shadows and patterns
  • Extending Highcharts
    • Extending Highcharts

3D Charts

by Torstein Hønsi

Getting started with Highcharts 3D Support.

Highcharts 3D is a Highcharts module providing limited 3D support to charts. It currently allows to create 3D Column charts, 3D Pie charts and 3D Scatter charts.

Load the required files.

To be able to use Highcharts 3D you first have to load Highcharts as usual and load the additional 3D plugin module:

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

(This should be included after highcharts.js)

Configuring the 3D options for a chart.

Loading the 3D module will not alter existing charts unless they are specifically set up to be 3D, this allows you to have both 3D Charts and regular charts on one page. The configuration for the 3D chart in general is done the chart section of the options, while some specific settings for different chart type can be found under plotOptions; here you see the fully extended 3D options with the type of value it expects:

chart: {
....
options3d: {
enabled: ´boolean value´,
alpha: ´numeric value´,
beta: ´numeric value´,
depth: ´numeric value´,
viewDistance: ´numeric value´,
frame: {
bottom: {
size: ´numeric value´,
color: ´color value´
},
side: {
size: ´numeric value´,
color: ´color value´
},
back: {
size: ´numeric value´,
color: ´color value´
}
}
},
...
}
...
plotOptions: {
...
column: {
...
depth: ´numeric value´,
groupZPadding: ´numeric value´,
...
},
...
pie: {
depth: ´numeric value´
},
...
}

General

For all 3D charts the following options are the most important (part of chart.options3d):

  • enabled                   This indicates wether the chart has to have 3D or not, set this to true.
  • depth                        The total depth of the chart, defaults to 100.
  • viewDistance          This defines how far a viewer is from the chart.
  • alpha & beta           The angles to rotate the view of the chart.

Beware that setting a low viewDistance can result in twisted effects in the perspective because the view point is too close to the chart.

In chart.options3d there is also the possibility to construct three panes around the chart called the frame, by default these panes are invisible but they can each be configured seperately in chart.options.3d.frame:

bottom|side|back: {
size: The thickness of the pane (defaults to 0)
color: The color of the pane (default to transparent)
}

3D Columns

A 3D chart of type columns will draw each column as a cuboid and thus create a 3D effect. By default the depth of this column is set to 25. To define another depth you have to go into the plotOptions and define one for the columns:

plotOptions.column.depth: The depth of each individual column.

Displaying multiple columns

Just like in normal column charts, the Highcharts 3D plugin does allow to display a series of charts and to order these as desired using techniques like grouping and stacking.

By default, grouping is true in Highcharts, displaying the columns next to each other, in Highcharts 3D this is still the same: the columns will be standing next to each other on the front row of your chart. By setting grouping to false, the columns will be placed behind each other in order of appearance. The default behavious is to place the columns without any spacing against each other, this can be modified by setting the groupZPadding option

plotOptions.column.groupZPadding: Spacing between columns on the z-axis.


Make sure the depth of the chart is sufficient to display all your columns. You will need at least the following depth: number of columns * (depth of column + z-padding)

A regular Highcharts column chart also offers the possibility to stack columns together, this is of course still available in 3D charts and works in exactly the same way by setting stacking to true and defining a stack number for each series.

3D Pie

For a pie chart the depth of the total chart is not important and setting the frame does not do anything (the frame is linked to the axis line and pies do not have these in the same way the other charts have). For pie charts it is important to set the depth property in plotOptions.

plotOptions.pie.depth: Defines the 'thickness' of the pie.

3D Scatter

In addition to x & y coordinates like in a regular scatter chart, the 3D plugin adds an extra z coordinate to each point to place in 3 dimensions. Similar to the normal chart these coordinates can be sent eithe literally or using an array:

{x: 1, y: 1, z: 1} is the same point as [1,1,1]

© 2018 Highcharts. All rights reserved.