3d chart column highchart

by Dwi Adi Laksono

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
   
</figure>

JavaScript

(function() {
   chartOptions = {
     title: {
       text: 'Grafik 3d dengan 3 kategori'
     },
     chart: {
       type: "column",
       options3d: {
         enabled: true,
         alpha: 30,
         beta: 20,
         depth: 200
       }
     },
     plotOptions: {
       column: {
         depth: 40,
         stacking: true,
         grouping: false,
         groupZPadding: 20
       }
     },
     zAxis: {
       min: 0,
       max: 2,
       categories: ['z1', 'z2', 'z3'],
     },
     colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00'],
     xAxis: {
       categories: ['kolom1', 'kolom2', 'kolom3', 'kolom4'],
     },

     series: [{
       "name": "z1",
       "stack": 0,
       "data": [
         [0, 100],
         [1, 150],
         [2, 80],
         [3, 90]
       ]
     }, {
       "name": "z2",
       "stack": 1,
       "data": [
         [0, 120],
         [1, 70],
         [2, 40],
         [3, 50]
       ]
     }, {
       "name": "z3",
       "data": [
         [0, 90],
         [1, 90],
         [2, 90],
         [3, 70]
       ],
       "stack": 2
     }]
   }
   $("#container").highcharts(chartOptions);
 })()