Angular Apexcharts template generates errors - template elements unrecognised

Question

I am following the example given in ApexCharts website to create candlestick with line combo chart in Angular. There's also a sandbox given.

Basically the way I am following the 'presciption' given in the webpage above by copying and pasting with very little modifications, so the component code is 99.99% identical (I removed some data). The code compiles fine before I define the template. However when I add the template code - most of the elements are not recognised.

If the template code is as follows:

<div id="chart">
  <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [title]="chartOptions.title"
    [tooltip]="chartOptions.tooltip"
    [stroke]="chartOptions.stroke"
  ></apx-chart>
</div>

only the [stroke] element is not getting a red underline marking an error. All the elements above [stroke] appear to generate errors - when I hover over any of them I can see:

Type 'ApexChart | undefined' is not assignable to type 'ApexChart'.
  Type 'undefined' is not assignable to type 'ApexChart'.ngtsc(2322)
my-chart.component.ts(12, 10): Error occurs in the template of component MyChartComponent.

The project was created with Angular 14, but the version installed on the PC is Angular 15.

Can anyone advise what might be missing or what might be causing those errors?

In the same project charts-js is used and there's no issues - all charts-js charts are rendered correctly without errors.