Highchart Combination Chart Area Range not displaying on chart but line chart works

Question

I am trying to create an area range chart with two line charts on one combined chart. The two lines are working but the area range is not displaying on my chart and cant figure out why.

I have an ajax request which retrieves my data from SQL and is stored in a variable (arealineDatas) as an array. For the range series I then retrieve the grpMth (name), Low (minimum) and High (maximum) value and store in a new array as per below:

    let arealineDatasRange = arealineDatas.map(function (obj) {
    return {
        grpMth: obj.grpMth,
        low: obj.min5Yr,
        high: obj.max5Yr,

    }
});

Below is my highchart config

$('#container').highcharts({
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            categories: arealineDatas.map(item => item["grpMth"])
        },
        series: [{
            name: '5 Year Range',
            data: arealineDatasRange,
            type: 'arearange',
            id: 'Results1',
            lineWidth: 0,
            linkedTo: ':previous',
            color: Highcharts.getOptions().colors[0],
            fillOpacity: 0.3,
            zIndex: 0,
            marker: {
                enabled: false
            }

        },

            {
                name: '2019',
                data: arealineDatas.map(item => item["lastYear"]),
                turboThreshold: 0,
                id: 'Results2',
                type: 'line',
            },
            {
                name: '2020',
                data: arealineDatas.map(item => item["thisYear"]),
                turboThreshold: 0,
                id: 'Results3',
                type: 'line',
            }],

    });

My chart is producing the line charts for both last year and this year. But the area range is not displaying. I tried to follow this example: https://jsfiddle.net/96a3hLud/ The var ranges variable in the example is how I have formatted my arealineDatasRange.

Console log output of arealineDatasRange:

    Array(12)
0: {grpMth: "Jan", low: 3882915, high: 61245507}
1: {grpMth: "Feb", low: 3963321, high: 57318985}
2: {grpMth: "Mar", low: 3870268, high: 59444925}
3: {grpMth: "Apr", low: 5484951, high: 51841962}
4: {grpMth: "May", low: 5706911, high: 56609542}
5: {grpMth: "Jun", low: 5726464, high: 55464485}
6: {grpMth: "Jul", low: 5665525, high: 57753335}
7: {grpMth: "Aug", low: 5548940, high: 49578796}
8: {grpMth: "Sep", low: 5037415, high: 51153701}
9: {grpMth: "Oct", low: 4133697, high: 58165233}
10: {grpMth: "Nov", low: 3853243, high: 58245494}
11: {grpMth: "Dec", low: 4287807, high: 64072150}
length: 12
__proto__: Array(0)

Answer 1

I reproduced your code and if the output of the arealineDatasRange is the same as you shared the area should be rendered properly.

Take a look at this demo: https://jsfiddle.net/BlackLabel/0bc6euq4/

Highcharts.chart('container', {
  title: {
    text: 'Combination chart'
  },
  xAxis: {
    categories: arealineDatas.map(item => item["grpMth"])
  },
  series: [{
      name: '5 Year Range',
      data: arealineDatas,
      type: 'arearange',
      id: 'Results1',
      lineWidth: 0,
      linkedTo: ':previous',
      color: Highcharts.getOptions().colors[0],
      fillOpacity: 0.3,
      zIndex: 0,
      marker: {
        enabled: false
      }
    }
  ],
});