Test 3D chart

by amrutaJgtp

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

CSS

#container {
  height: 400px;
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto;
}

JavaScript

$(function () {
  $('#container').highcharts({
    chart: {
      type: 'column',

      options3d: {
        enabled: true,
        alpha: 10,
        beta: 25,
        depth: 70
      }
    },
    title: {
      text: '3D chart with null values'
    },

    plotOptions: {
      column: {
        depth: 25
      }
    },
    xAxis: {

      "categories": ["1.00", "2.00", "3.00", "4.00"],

    },
     yAxis: [{
            title: {
                text: null
            }
        },{
          	opposite : true,
            title: {
                text: null
            }
        }],
    series: [{
      "name": "Col_4",
      "data": [45, 56, 23, 6]
        /*[{
          "eQCategoryValue": "1.00",
          "y": 45
        }, {
          "eQCategoryValue": "2.00",
          "y": 56
        }, {
          "eQCategoryValue": "3.00",
          "y": 23
        }, {
          "eQCategoryValue": "4.00",
          "y": 6
        }],*/

      /*"color": "rgba(106,0,255,1)",
      "fillColor": "rgba(106,0,255,1)",*/

    }, {

       yAxis : 1,
      "name": "Number Of Children",
      "data": [10,10,10,10]
        /*[{
          "eQCategoryValue": "1.00",
          "y": 1
        }, {
          "eQCategoryValue": "2.00",
          "y": 1
        }, {
          "eQCategoryValue": "3.00",
          "y": 1
        }, {
          "eQCategoryValue": "4.00",
          "y": 1
        }],*/
        /*
         "color": "rgba(164,196,0,1)",
         "fillColor": "rgba(164,196,0,1)",*/

    }]

  });
});