I’m upgrading code that makes use of angular-highcharts (not highcharts-angular). The web page I have below works under Angular 15:

<div class="row justify-content-center">
    <div class="col-12" *ngIf="chart">
      <div [chart]="chart"></div>
    </div>
  </div>

but in the upgrade process I get an error upon above resulting in:

Type 'Chart' is not assignable to type 'Chart | StockChart | MapChart | HighchartsGantt | undefined'.
  Type 'Chart' is missing the following properties from type 'Chart': refSubject, ref$, ref, addPoint, and 2 more. 

I tried various definitions, below is my latest and so far all were unsuccessful:

import {GraphOptions} from '../../../models/graph-options.model';
import dayjs from 'dayjs';
import {Series} from  'highcharts';
import * as Highcharts from 'highcharts';
import {Chart} from 'angular-highcharts';

then I try to declare chart:

  chart = new Chart(<Chart.Options>{
    chart:        {  type:  'spline', zoomType: 'xy',
      height:       (function () { let retVal = screen.height - 100; if (retVal < 300) retVal = 300;  if (retVal > 600) retVal = 600;   return retVal + 'px'; })() },
    plotOptions:  { series: { states: {  inactive: { opacity: 1 }  }  }  },
    credits:      { enabled: false   },
    xAxis:        { type: 'datetime',  title:   { text: this.translate.instant('DateTime') },
      events:       { setExtremes: (x) => this.setExtremes(x) },
      crosshair:    { snap: false },
      labels:       { style: {  fontSize: '11pt' } } },
    yAxis:        [   { id:         'yAxis-0', title: { text: this.translate.instant('Value') },
      crosshair:  { snap: false, label: { enabled: true, format: '{value:.2f}' } },
      labels:     { style: {  fontSize: '11pt' } } }],
    title:        { text: ''  },
    series:       [],
    time:         { useUTC: false }
  });

I have also tested a few things inside the constructor, the original code didn’t have a definition like below and I’m not sure as if that’s okay either.

    this.chartRef = new Highcharts.Chart(<Highcharts.Options>{
      chart:        {  type:  'spline', zoomType: 'xy',
        height:       (function () { let retVal = screen.height - 100; if (retVal < 300) retVal = 300;  if (retVal > 600) retVal = 600;   return retVal + 'px'; })() },
      plotOptions:  { series: { states: {  inactive: { opacity: 1 }  }  }  },
      credits:      { enabled: false   },
      xAxis:        { type: 'datetime',  title:   { text: this.translate.instant('DateTime') },
        events:       { setExtremes: (x) => this.setExtremes(x) },
        crosshair:    { snap: false },
        labels:       { style: {  fontSize: '11pt' } } },
      yAxis:        [   { id:         'yAxis-0', title: { text: this.translate.instant('Value') },
        crosshair:  { snap: false, label: { enabled: true, format: '{value:.2f}' } },
        labels:     { style: {  fontSize: '11pt' } } }],
      title:        { text: ''  },
      series:       [],
      time:         { useUTC: false }
    });
..