I am getting this error and I can not figure it out, am I missing something?

Question

I am following this article to work with charts in angular. Even following it step by step I am still getting this error. Can someone please explain to me what the error is and why it is happening?

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"]
      }
    };

  }


  }

This is my app.component.html, this is where error is occuring

Answer 1

The error says that the type you gave is not corresponding to the expected type. [title] expect the type ApexTitleSubtitle, and your variable is of type ApexTitleSubtitle | undefined

I suppose you will ask what is the difference. I think, it is due to the Partial<>. When you define a Partial you said that each field of the type T can be optional, so each field could have a value or be undefined. the library component want as input a ChartOptions and not a Partial<ChartOptions>.

If you want that it works, just remove the partial and set the needed attributes