remove gap below highcharts area chart when all values are zero
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?
2 answers

The gap will not be there if a yAxis
min
andmax
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
andmax
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/jquery3.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/classreference/Highcharts.Chart#update

This is general problem for calculating min and max for scale, when only one yvalue 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; } });