Angular 6 - Highcharts 7 - areasplinerange issue

<!doctype html>

<html>

<head>
  <script src="./lib/main.ts"></script>
</head>

<body>
  <my-app>
    loading...
  </my-app>
</body>

</html>

//our root app component
import { Component, OnInit, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as Highcharts from 'highcharts';
import { HighchartsChartModule  } from 'highcharts-angular';

import HC_more from 'highcharts/highcharts-more';
HC_more(Highcharts);

@Component({
  selector: 'my-app',
  template: `
        <div id="container" style="height: 400px; min-width: 380px"></div>
    `,
})
export class App implements OnInit {
  name: string;
  constructor() {
  }

  ngOnInit() {
    Highcharts.chart('container', {
      series: [
        {
          id: 'rangeLine',
          name: 'Range',
          showInLegend: false,
          type: 'areasplinerange',
          data: [
            ['Q1 15', 500, 600],
            ['Q2 15', 1001, 1008],
            ['Q3 15', 817.8, 884.2],
            ['Q4 15', 860.226, 887.6],
            ['Q1 16', 793.816, 814.27],
            ['Q2 16', 801.1, 839.591],
            ['Q3 16', 944.679, 1084.7],
            ['Q4 16', 1076.998, 1116.6],
            ['Q1 17', 992.937, 1035],
            ['Q2 17', 993, 1049.098],
            ['Q3 17', 1005.44, 1105.6],
            ['Q4 17', 1020, 1129.87472],
            ['Q1 18', 1040, 1112],
            ['Q2 18', 1062.8, 1095.111755],
            ['Q3 18', 1096.9, 1171.446],
            ['Q4 18', 1137.226, 1275.355],
            ['Q1 19', 1109.7, 1192.457],
            ['Q2 19', 1120, 1192.41],
            ['Q3 19', 1144.9, 1199.623],
            ['Q4 19', 1191.4, 1257.9],
          ],
          color: '#7cb5ec',
          lineWidth: 0,
          fillOpacity: 0.3,
          zIndex: 0,
        },
      ],
      
      xAxis: {
        categories: [
          'Q1 15',
          'Q2 15',
          'Q3 15',
          'Q4 15',
          'Q1 16',
          'Q2 16',
          'Q3 16',
          'Q4 16',
          'Q1 17',
          'Q2 17',
          'Q3 17',
          'Q4 17',
          'Q1 18',
          'Q2 18',
          'Q3 18',
          'Q4 18',
          'Q1 19',
          'Q2 19',
          'Q3 19',
          'Q4 19',
        ],
      },

    });
  }


}

@NgModule({
  imports: [HighchartsChartModule, BrowserModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

// Shim the environment
import 'core-js/client/shim';

// Angular requires Zones to be pre-configured in the environment
import 'zone.js/dist/zone';

//main entry point
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app';

import './style.css';

platformBrowserDynamic().bootstrapModule(AppModule);

h1,
p {
    font-family: sans-serif;
}

{
    "name": "@plnkr/starter-angular",
    "version": "1.0.3",
    "description": "Angular starter template",
    "dependencies": {
        "@angular/common": "^6.0.9",
        "@angular/compiler": "^6.0.9",
        "@angular/core": "^6.0.9",
        "@angular/platform-browser": "^6.0.9",
        "@angular/platform-browser-dynamic": "^6.0.9",
        "core-js": "^2.5.5",
        "highcharts": "^7.0.1",
        "highcharts-angular": "^2.4.0",
        "rxjs": "^6.1.0",
        "zone.js": "^0.8.26"
    },
    "main": "./lib/main.ts",
    "plnkr": {
        "runtime": "system",
        "useHotReload": true
    }
}

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}