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.

enter image description here

If any of the values is not zero, then the zero values migrate down to the axis:

enter image description here

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

  • answered 2018-07-11 07:48 ewolden

    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

  • answered 2018-07-11 12:50 Paweł Fus

    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;
      }
    });