- Highcharts Tutorial
- Highcharts - Home
- Highcharts - Overview
- Highcharts - Environment Setup
- Highcharts - Configuration Syntax
- Highcharts - Line Charts
- Highcharts - Area Charts
- Highcharts - Bar Charts
- Highcharts - Column Charts
- Highcharts - Pie Charts
- Highcharts - Scatter Charts
- Highcharts - Bubble Charts
- Highcharts - Dynamic Charts
- Highcharts - Combinations
- Highcharts - 3D Charts
- Highcharts - Angular Gauges
- Highcharts - Heat Maps
- Highcharts - Tree Maps
- Highcharts Useful Resources
- Highcharts - Quick Guide
- Highcharts - Useful Resources
- Highcharts - Discussion
3D Column Chart with Stacking and Grouping
Following is an example of a 3D Column chart with null and 0 values.
We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.
An example of a 3D Column chart with null and 0 values is given below.
Configurations
Let us now see the additional configurations/steps taken.
chart.options3d
Configure the chart type to be 3D based. Set the type to be 'Column'. Here, the charts can be rendered in 3 dimensions.
var chart = { type: 'column', options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } };
Example
highcharts_3d_stacking.htm
<html> <head> <title>Highcharts Tutorial</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script src = "https://code.highcharts.com/highcharts.js"></script> <script src = "https://code.highcharts.com/highcharts-3d.js"></script> </head> <body> <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div> <script language = "JavaScript"> $(document).ready(function() { var chart = { type: 'column', marginTop: 80, marginRight: 40, options3d: { enabled: true, alpha: 15, beta: 15, viewDistance: 25, depth: 40 } }; var title = { text: 'Total fruit consumption, grouped by gender' }; var xAxis = { categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] }; var yAxis = { allowDecimals: false, min: 0, title: { text: 'Number of fruits' } }; var tooltip = { headerFormat: '<b>{point.key}</b><br>', pointFormat: '<span style = "color:{series.color}">\u25CF</span> {series.name}:{point.y} / {point.stackTotal}' }; var plotOptions = { column: { stacking: 'normal', depth: 40 } }; var series = [{ name: 'John', data: [5, 3, 4, 7, 2], stack: 'male' }, { name: 'Joe', data: [3, 4, 4, 2, 5], stack: 'male' }, { name: 'Jane', data: [2, 5, 6, 2, 1], stack: 'female' }, { name: 'Janet', data: [3, 0, 4, 4, 3], stack: 'female' } ]; var json = {}; json.chart = chart; json.title = title; json.xAxis = xAxis; json.yAxis = yAxis; json.tooltip = tooltip; json.plotOptions = plotOptions; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>
Result
Verify the result.
highcharts_3d_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google