Wrong x-axis min max values Highcharts

Question

I'm creating an area chart where the y-axis values must start and end in the edges of x-axis. I referred to the following link which holds good for values greater than 2.

JSFiddle for >2 values

For values lesser than 2, the x-axis labels disappear and some number gets displayed.

JSFiddle for <1 values

Is there a way to solve this inconsistency?

 var myChartb_3 = Highcharts.chart('container', { chart: { type: 'area', zoomType: 'xy', }, title: null, xAxis: { endOnTick: false, startOnTick: false, min: 0.5, max: 0.5, categories: ['Nov 18', 'Dec 18'], title: { enabled: false } }, legend: { enabled: true, align: 'center', itemMarginTop: 20, itemStyle: { fontSize: '14px', fontWeight: 'normal', color: '#111', }, symbolRadius: 4, }, yAxis: { title: { enable: false, }, labels: { formatter: function() { return '$' + this.value } } }, tooltip: { shared: true, useHTML: true, formatter: function() { return this.points.reduce(function(s, point) { return s + '<div class="proxima mB5"><span class="dIB mR10" style="background:' + point.series.color + ';width: 16px;height:16px;border-radius:4px; vertical-align: bottom"></span>' + point.series.name + ': <b class="proximas">' + point.series.name + '</b></div>' }, '<b class="proxima mB5 dIB">' + this.x + '</b>'); }, crosshairs: [{ snap: false, width: 1, color: '#979797', dashStyle: 'shortdash', zIndex: 22 }] }, plotOptions: { area: { stacking: 'normal', lineWidth: 1, marker: { enabled: true, symbol: 'circle', radius: 5, lineColor: null, states: { hover: { enabled: true, radius: 4 } } }, } }, series: [{ color: '#F1A047', lineColor: '#F1A047', marker: { fillColor: '#F1A047', }, fillColor: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, '#FFEBD6'], [1, 'rgba(255,254,254,0.99)'] ] }, name: 'Sample1', data: [10, 20] }, { color: '#6DA4F5', lineColor: '#6DA4F5', marker: { fillColor: '#6DA4F5', }, fillColor: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, '#DCEAFF'], [1, 'rgba(255,254,254,0.99)'] ] }, name: 'Sample2', data: [25, 24] }, { color: '#11B177', lineColor: '#11B177', marker: { fillColor: '#11B177', }, fillColor: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, '#E2FFF5'], [1, 'rgba(255,254,254,0.99)'] ] }, name: 'Sample3', data: [15, 25] }] });

 <div id="container" style="height: 400px;"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.0.4/highcharts.js"></script>

Answer 1

Notice that setting xAxis.min and xAxis.max to 0.5 broaden your Axis, which has min set as 0 and max to 1 by default for only two points - that's why chart looks as it does.

As a workaround you can try this solution:

Demo: https://jsfiddle.net/BlackLabel/exfuhqg4/

This custom code looks for the highest total value and set it as a max for the Axis:

events: {
  load() {
    let chart = this,
        yAxis = chart.yAxis[0],
        total = 0;
    for (let i in yAxis.stacks['area,,,']) {
      total = Math.max(total, yAxis.stacks['area,,,'][i].total)
    }

    yAxis.update({
      max: total
    })
  }
}

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

API: https://api.highcharts.com/class-reference/Highcharts.Axis#update