- 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
Highcharts - 3D Column Chart
We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter.
Configurations
Let us now see the additional configurations/steps taken.
chart.options3d
Configure the chart type to be 3D based. Set the type as 'column'. Options to render charts in 3 dimensions.
var chart = { type: 'column', options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } };
Example
highcharts_3d_column.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> <div id = "sliders"> <table> <tr> <td>Alpha Angle</td> <td><input id = "R0" type = "range" min = "0" max = "45" value = "15"/> <span id = "R0-value" class = "value"></span> </td> </tr> <tr> <td>Beta Angle</td> <td><input id = "R1" type = "range" min = "0" max = "45" value = "15"/> <span id = "R1-value" class = "value"></span> </td> </tr> </table> </div> <script language = "JavaScript"> $(document).ready(function() { var chart = { renderTo: 'container', type: 'column', margin: 75, options3d: { enabled: true, alpha: 15, beta: 15, depth: 50, viewDistance: 25 } }; var title = { text: 'Chart rotation demo' }; var subtitle = { text: 'Test options by dragging the sliders below' }; var plotOptions = { column: { depth: 25 } }; var series = [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }]; var json = {}; json.chart = chart; json.title = title; json.subtitle = subtitle; json.series = series; json.plotOptions = plotOptions; var highchart = new Highcharts.Chart(json); function showValues() { $('#R0-value').html(highchart.options.chart.options3d.alpha); $('#R1-value').html(highchart.options.chart.options3d.beta); } // Activate the sliders $('#R0').on('change', function () { highchart.options.chart.options3d.alpha = this.value; showValues(); highchart.redraw(false); }); $('#R1').on('change', function () { highchart.options.chart.options3d.beta = this.value; showValues(); highchart.redraw(false); }); showValues(); }); </script> </body> </html>
Result
Verify the result.
highcharts_3d_charts.htm
Advertisements
To Continue Learning Please Login
Login with Google