Hide columns on Stacked Bar when all values are 0 - highcharts

Question

I want to a stacked bar chart to be able to automatically hide any empty columns, i.e. columns where all the values add up to 0.
For example, in the this chart I'd like to completely hide Oranges, even though in the code it would still exist as a category.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 0, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 0, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 0, 4, 2, 5]
}]
});
https://jsfiddle.net/jbaptie/dpLa4r8w/

Answer 1

First, you need to find which category has only 0 values, for example in this way:
var series = [{
name: 'John',
data: [5, 0, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 0, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 0, 4, 2, 5]
}],
i = 1;
series[0].data.forEach(function(el, j) {
if (!el) {
for (; i < series.length; i++) {
if (series[i].data[j]) {
i = series.length;
} else if (i === series.length - 1) {
... // only 0 values
}
}
}
});
Then, you can use broken-axis module and create the breaks array based on your data:
} else if (i === series.length - 1) {
breaks.push({
from: j - 0.5,
to: j + 0.5
});
}
Live demo: https://jsfiddle.net/BlackLabel/te1uv8rq/
API Reference: https://api.highcharts.com/highcharts/xAxis.breaks

Answer 2

You can prepare the category and series before loading the data on the chart, where you can check the series elements which have values as 0 for all the columns and remove them from the JSON array.
removeNullValues() method is checking the categories with all values as 0 and removing it from the series and categories.
var category = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
var seriesData = [{
name: 'John',
data: [5, 0, 4, 0, 2]
}, {
name: 'Jane',
data: [2, 0, 3, 0, 1]
}, {
name: 'Joe',
data: [3, 0, 4, 0, 5]
}];
function removeNullValues(){
var seriesSize = this.seriesData.length;
var dataSize = this.seriesData[0].data.length;
for(var j=dataSize-1;j>=0;j--){
var flag = 0;
for(var i=seriesSize-1;i>=0;i--){
if(this.seriesData[i].data[j]!=0){
flag=1;
break;
}
}
if(flag==0){
category.splice(j, 1);
for(var i=seriesSize-1;i>=0;i--){
this.seriesData[i].data.splice(j,1);
}
}
}
}
removeNullValues();
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: this.category
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: this.seriesData
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>