highcharts, Set minimum height for stacked column chart?

Question

I have a 3D stacked column chart. If there is some larger values in the data, the small values will not be shown in the chart. As you can see in

http://jsfiddle.net/43pv1a2q/6/

series: [{
        name: 'John',
        data: [500, 3, 4, 7, 2], //If change 500 to 5, all blocks will be shown
        stack: 'male'
    }, {
        name: 'Joe',
        data: [300, 4, 4, 2, 5], //change 300 to 3
        stack: 'male'
    },

    {
        name: 'Tom',
        data: [500, 3, 4, 7, 2], // change 500 to 5
        stack: 'male'
    }]

The minPointLength works with bar chart, but not with stacked column chart. https://api.highcharts.com/highcharts/series.columnrange.minPointLength

How do you set a minimum height for the block in a stacked column?

Answer 1

It seems to be a bug. You can report it here: https://github.com/highcharts/highcharts/issues

Workaround:

I update every point using a new value if its original y value is less than 50 (threshold) and save the original value in realValue property. Then I manually compute the cumulative values for every stack in tooltip.pointFormatter so that the viewer sees proper values:

events: {
  load: function() {

    var chart = this,
      minColHeightVal = 50;

    chart.series.forEach(function(s) {
      s.points.forEach(function(p) {

        if (p.y < minColHeightVal) {
          p.update({
            y: minColHeightVal,
            realValue: p.y
          }, false);
        }
      });
    });

    chart.redraw();

  }
}

// (...)

pointFormatter: function() {
  var stackSum = 0,
    point = this,
    chart = point.series.chart;

  chart.series.forEach(function(s) {
    s.points.forEach(function(p) {
      if (p.x === point.x) {
        stackSum += p.realValue ? p.realValue : p.y
      }
    });
  });

  return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': ' + (point.realValue ? point.realValue : point.y) + ' / ' + stackSum;

}

Live demo: http://jsfiddle.net/kkulig/j3toufk9/

Answer 2

The solution might be to set the y-axis to type: logarithmic, like so: http://jsfiddle.net/43pv1a2q/8/

yAxis: {
    type: 'logarithmic',
    allowDecimals: false,
    title: {
        text: 'Number of fruits',
        skew3d: true
    }
},

The only change I've made is to set "type: 'logarithmic' and removed "min: 0". I can't think of any other way to achieve what you're looking for when working with such hugely different numbers.

EDIT: Of course, you can still use "min: X" to set minimum value on the y-axis; I just removed it because it was unnecessary when I wanted minimum to default.