Highcharts fill area point interval issue

Question

When I just draw the graph with 'spline', the yaxis interval is resaonable so the graph look's good. The code is as follows:

 chart: {
     type: 'spline'
 }

But, when I change the type to 'area', the interval is changed too. Therefore, the graph look's bad.

 chart: {
     type: 'area'
 }

How can I fix it without setting label's 'min' and 'tickInterval'

I need this becuase if I set the label property, there would be followed bunch of works.

Answer 1

One way you can achieve this, is by using the following function that triggers on the event load:

chart: {
  type: 'area',
  events: {
    load: function() {
      let chart = this;
      let tmpMaxMin = chart.yAxis[0].getExtremes();
      chart.yAxis[0].setExtremes(tmpMaxMin['dataMin'], tmpMaxMin['dataMax']);
    }
  }
},    

Working example: http://jsfiddle.net/ewolden/La13rjwf/

API on events.load: https://api.highcharts.com/highcharts/chart.events.load

API on getExtremes: https://api.highcharts.com/class-reference/Highcharts.Series#getExtremes

Answer based on: https://stackoverflow.com/a/35870891/8376046

Answer 2

Simply set softThreshold property to true.

API Reference:
https://api.highcharts.com/highcharts/plotOptions.area.softThreshold

Example:
http://jsfiddle.net/srx8py4v/