remove gap below highcharts area chart when all values are zero - highcharts

Question

I am using the below simple area chart in highcharts version 5.0.6.
If any of the values is not zero, then the zero values migrate down to the axis:
how do I ensure that the zero's are all on the x axis without the gap when all the values are zero?

Answer 1

The gap will not be there if a yAxis min and max value is set. I am assuming you have dynamic data, so setting these values static would be difficult. Therefore, you can do this:
Add a load event, that goes through all the points in the graph after it has been loaded and checks if they are all zero or not. If they are all zero, then explicitly set the yAxis min and max with the update function. You would need to set something like the following chart option:
chart: {
events: {
load: function() {
let allZero = true
let seriesData = this.series[0].data
for (let i = 0; i < seriesData.length; i++) {
if (seriesData[i].y != 0) {
allZero = false
}
}
if (allZero) {
this.update({
yAxis: {min: 0, max: 1}
}, true)
}
}
}
},
var chart = Highcharts.chart('container', {
chart: {
events: {
load: function() {
let allZero = true
let seriesData = this.series[0].data
for (let i = 0; i < seriesData.length; i++) {
if (seriesData[i].y != 0) {
allZero = false
}
}
if (allZero) {
this.update({
yAxis: {
min: 0,
max: 1
}
}, true)
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
allowPointSelect: true
}
},
series: [{
data: [0, 0, 0, 0, 0, 0]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Working JSFiddle example: http://jsfiddle.net/ewolden/4Lq2mb3w/1/
API on load event: https://api.highcharts.com/highcharts/chart.events.load
API on chart.update(): https://api.highcharts.com/class-reference/Highcharts.Chart#update

Answer 2

This is general problem for calculating min and max for scale, when only one y-value exists. Chart can not compute the extremes, so line is rendered in the middle. Long time ago someone reported alignment to xAxis as bug and now it's fixed..
Anyway, universal solution is to use simple plugin to change this behaviour and align to xAxis: http://jsfiddle.net/BlackLabel/td83ms0q/
Highcharts.wrap(Highcharts.Axis.prototype, 'setTickPositions', function(proceed, secondPass) {
proceed.call(this, secondPass);
if (this.tickPositions.length === 1 && this.options.alignToAxis) {
this.min = 0;
this.max *= 2;
}
});