type undefined error on ng-apexchart for angular

Question

Help me understand this error, please.

I am simply trying to create a bar chart for my angular web app using ng-apexchart. I am following this article . I am not sure what I have done wrong but i am getting error in html file of the component.

this is in my html:

<apx-chart [series]="chartOptions.series" [chart]="chartOptions.chart" [title]="chartOptions.title"></apx-chart>

error is on [series] [chart] and [title], it says

Type 'ApexAxisChartSeries | undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.
  Type 'undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.ngtsc(2322)

Also, Can I only add the code from an earlier mentioned article in my parent component or can I use it in any child component too?

this is my app.component.ts

import { Component } from '@angular/core';


import {
  ChartComponent,
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexTitleSubtitle
} from "ng-apexcharts";


export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
};



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {

    this.chartOptions = {
      series: [
        {
          name: "My-series",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
      ],
      chart: {
        height: 350,
        type: "bar"
      },
      title: {
        text: "My First Angular Chart"
      },
      xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
      }
    };

  }


  }

Answer 1

Use non-null assertion operator in typescript. I think the documentation of Apexchart is outdated.

Add the exclamation mark to the properties like below.

[series]="chartOptions.series!"