why is my ionic not responding with the waterfall diagram highchart

ionic info

why is my ionic not responding with the waterfall diagram highchart this is part TS I followed on waterfall highchart but I did not find a bright spot i just get

ERROR Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=waterfall missingModuleFor: waterfall

 import { Component, OnInit, ViewChild } from '@angular/core';
import * as HighCharts from 'highcharts';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
 export class HomePage {
 
   constructor() { }
   
   ionViewDidEnter() {
const myChart = HighCharts.chart('reven', {
      chart: {
        type: 'line'
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: ['1', '2', '3', '4', '5', '6', '7']
      },
      yAxis: {
        title: {
          text: 'Total Production Tonnage'
        }
      },
      legend: {
        reversed: true
      },
      plotOptions: {
        series: {
          stacking: 'normal',
          marker: {
            enabled: true,
            symbol: 'circle',
            radius: 1
          }
        }
      },
      series: [
        {
          name: 'Revenue',
          type: undefined,
          color: '#ff8138',
          data: [65, 59, 80, 81, 56, 55, 40]
        }, {
          name: 'Expense',
          type: undefined,
          color: '#ffd534',
          data: [35, 40, 70, 61, 26, 35, 60]
        }, {
          name: 'Net Income',
          type: undefined,
          color: '#BBF0F3',
          data: [30, 30, 50, 60, 20, 30, 50]
        }
      ]
    });
   }
   
 }

<div id="waterfallore"></div>

const myChart = HighCharts.chart('waterfallore', {
  chart: {
    type: 'waterfall'
  },

  title: {
    text: 'Highcharts Waterfall'
  },

  xAxis: {
    type: 'category'
  },

  yAxis: {
    title: {
      text: 'USD'
    }
  },

  legend: {
    enabled: true
  },

  tooltip: {
    pointFormat: '<b>${point.y:,.2f}</b> USD'
  },

  series: [{
    type: undefined,
    upColor: '#ff8138',
    color: '#ffd534',
    data: [{
      name: 'Start',
      y: 120000
    }, {
      name: 'Product Revenue',
      y: 569000
    }, {
      name: 'Service Revenue',
      y: 231000
    }, {
      name: 'Positive Balance',
      isIntermediateSum: true,
      color: '#ffd534'
    }, {
      name: 'Fixed Costs',
      y: -342000
    }, {
      name: 'Variable Costs',
      y: -233000
    }, {
      name: 'Balance',
      isSum: true,
      color: '#ffd534'
    }],
    dataLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold'
      }
    },
    pointPadding: 0
  }]
});

result in the console

You need to import and initialize highcharts-more module:

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