Неправильные значения оси X min max Highcharts

Question

Я создаю диаграмму области, где значения оси Y должны начинаться и заканчиваться по краям оси X. Я сослался на следующую ссылку , которая подходит для значений больше 2.

JSFiddle для> 2 значений

Для значений меньше 2, метки оси x исчезают, и отображается некоторое число.

JSFiddle для <1 значений </p>

Есть ли способ устранить это несоответствие?

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

Обратите внимание, что установка xAxis.min и xAxis.max до 0,5 расширяет вашу ось, для которой min установлен как 0, а max по 1 по умолчанию только для двух точек - поэтому график выглядит так, как он.

В качестве обходного пути вы можете попробовать это решение:

Демонстрация: https://jsfiddle.net/BlackLabel/exfuhqg4/

Этот пользовательский код ищет наибольшее общее значение и устанавливает его в качестве максимума для оси:

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