Different Depth In 3d Barchart In Highcharts

I know that I can set depth of all bars in Highcharts using depth property in column property of plotOptions likes the following code: plotOptions: { column : { depth:

Solution 1:

In core code the depth property is always taken from the series object options. Every group consists of the points with the same x values.

These 2 solutions came to my mind:

1. Modify the core code so that depth values are taken from points' configuration instead:

(function(H) {
  (...)

  H.seriesTypes.column.prototype.translate3dShapes = function() {
      (...)    

        point.shapeType = 'cuboid';
        shapeArgs.z = z;
        shapeArgs.depth = point.options.depth; // changed from: shapeArgs.depth = depth;
        shapeArgs.insidePlotArea = true;

      (...) 
  };

})(Highcharts);

Series options:

series: [{
    data: [{y:5, depth:50}, {y:2, depth:100}]
  }, {
    data: [{y:13, depth:50}, {y:1, depth:100}]
  }]

Live demo:http://jsfiddle.net/kkulig/3pkon2Lp/

Docs page about overwriting core functions:https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

---

2. Create a separate series for every point.

depth property can be applied to a series so the modification of the core wouldn't be necessary. Every series is shown in legend by default so series will have to be properly connected using linkedTo property (so that the user doesn't see as many series as points).

Points can be modified before passing them to the chart constructor or dynamically handled in chart.events.load.

Live demo:http://jsfiddle.net/kkulig/37sot3am/

load: function() {
    var chart = this,
      newSeries = [],
      merge = Highcharts.merge,
      depths = [10, 100]; // depth values for subsequent x valuesfor (var i = chart.series.length - 1; i >= 0; i--) {
      var s = chart.series[i];

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

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

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

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

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

    newSeries.forEach((s) => chart.addSeries(s));
  }

API reference:

https://api.highcharts.com/highcharts/plotOptions.series.linkedTo