Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.src.js"></script>


<div id="container"></div>

JavaScript

var chart = Highcharts.chart('container', {

  chart: {
    type: 'bar',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 15
    },
    events: {
      load: function() {
        var chart = this,
          newSeries = [],
          merge = Highcharts.merge,
          depths = [10, 100]; // depth values for subsequent x values
        for (var i = chart.series.length - 1; i >= 0; i--) {
          var s = chart.series[i];

          s.data.forEach(function(p, i) {

            // merge point options
            var pointOptions = [merge(p.options, {
              // x value doesn't have to appear in options so it needs to be added manually
              x: p.x
            })];

            // merge series options
            var options = merge(s.options, {
              data: pointOptions,
              depth: depths[i]
            });

            // mimic original series structure in the legend
            if (i) {
              options.linkedTo = ":previous"
            }

            newSeries.push(options);
          });
          s.remove(true);
        }

        newSeries.forEach((s) => chart.addSeries(s));
      }
    }
  },
  series: [{
    data: [1, 4],
    color: "#bacada",
    name: 'Gray'
  }, {
    data: [5, 6],
    color: "#bada55",
    name: 'Green'
  }],

  xAxis: {
    min: -1,
    max: 2
  }

});