Highcharts - Column 3D

author(s): Torstein Hønsi Doug Hill

by Doug Hill

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<script src="http://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div class="container-fluid"><div class="row"><div class="col-sm-12">
    <div id="container"></div>
    </div></div></div>

CSS

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

JavaScript

$(function () {
    $('#container').highcharts({
        "colors": ["#056B9E", "#0682C1", "#079AE3", "#16ADF8", "#39B9F9", "#5CC5FA", "#7ED1FB", "#A1DEFC", "#C3EAFD", "#E6F6FE"],
  "chart": {
    "height": 700,
    "type": "column",
      
    "backgroundColor": "#FFF",
    "borderRadius": 3,
    "borderWidth": 3,
    "borderColor": "rgba(124, 132, 141, 0.06)",
    "plotBackgroundColor": "#FFF",
    "plotBorderColor": "rgba(124, 132, 141, 0.06)",
    "plotBorderWidth": 0,
    "plotShadow": false,
    "margin": [
      100,
      100,
      100,
      0
    ],
    "spacing": [
      30,
      100,
      100,
      0
    ],
    "marginLeft": 5,
    "spacingLeft": 0,
    "options3d": {
      "enabled": true,
      "alpha": 0,
      "beta": 25,
      "depth": 100,
      "viewdistance": 100
    }
  },
  "legend": {
    "borderColor": "#DBDEE0",
    "borderWidth": 0.5,
    "borderRadius": 3,
    "enabled": true,
    "reversed": false,
    "floating": true,
    "layout": "vertical",
    "verticalAlign": "top",
    "align": "right",
    "backgroundColor": "rgba(255, 255, 255, 0.8)",
    "padding": 20,
    "shadow": false,
    "x": -4,
    "y": 24
  },
  "title": {
    "text": "Orlando: Agent Call Opportunities"
  },
  "subtitle": {
    "text": "January 2014"
  },
  "plotOptions": {
    "column": {
      "pointPadding": 0.1,
      "groupPadding": 0.05,
      "grouping": true,
      "depth": 40
    }
  },
  "xAxis": {
    "categories": [
      "Answered",
      "Transferred",
      "Completed",
      "Disconnect"
    ]
  },
  "yAxis": {
    "offset": 0,
    "title": {
      "x": 40,
      "margin": 0,
      "text": "Agent Interactions"
    }
  },
            "series": [{
            "name": "James Goodwell",
                "data": [
            44,
            11,
            15,
            7]
        }, {
            "name": "Doug Alexander",
                "data": [
            34,
            18,
            10,
            13]
        }, {
            "name": "Sally...