❮ Highcharts Setup Highcharts Column Stacked Grouped ❯

Highcharts 3D Column Chart

The following example demonstrates a 3D column chart.

We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations.

Configuration

chart.options3d Configuration

The following lists the basic configurations for a 3D chart. Set the chart's type property to 'column', and the options3d option can be used to set the three-dimensional effect.

var chart = {
   type: 'column',
   options3d: {
         enabled: true,     // Show whether the chart is set to 3D, we set it to true
         alpha: 15,         // Chart view rotation angle
         beta: 15,          // Chart view rotation angle
         depth: 50,         // Total depth of the chart, default is 100
         viewDistance: 25   // Define the viewing distance of the chart
   }
};

Example

Filename: highcharts_3d_column.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org(tutorialpro.org)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://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 Example'   
   };
   var subtitle = {
      text: 'Test 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>

Try it »

The above example outputs the following result:

Highcharts 3D Charts

❮ Highcharts Setup Highcharts Column Stacked Grouped ❯