ApexChart does not render after compilation

[Iqra-Niazi]

In my dashboard component, I used ApexCharts. The project compiles fine without any errors, but the chart does not render on the front end.

HTML code

<div class="card-body d-flex flex-column justify-content-end">
              <div class="row">
                <div class="col">
                  <div id="chart">
                    <apx-chart 
                      [series]="chartOptions.series" 
                      [chart]="chartOptions.chart"
                      [plotOptions]="chartOptions.plotOptions" 
                      [labels]="chartOptions.labels">
                    </apx-chart>
                  </div>
                </div>               
                <div class="col-auto ps-0">
                </div>
              </div>
            </div>

ts file

import { Component, OnInit, ViewChild } from '@angular/core';

import { ApplicationDataService } from 'src/app/shared/services/application.service';
import { IApplication } from 'src/app/shared/types/IApplication';
import { NotificationService } from 'src/app/app.notification.service';

import {
  ApexNonAxisChartSeries,
  ApexPlotOptions,
  ApexChart,
  ChartComponent
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  labels: string[];
  plotOptions: ApexPlotOptions;
};
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
})
export class DashboardComponent implements OnInit {
  @ViewChild("chart") chart!: ChartComponent;
  public chartOptions!: Partial<ChartOptions>;

  constructor() { }

  ngOnInit(): void {
    this.chartOptions = {
      series: [50],
      chart: {
        width:350,
        height: 350,
        type: "radialBar"
      },
      plotOptions: {
        radialBar: {
          hollow: {
            size: "70%"
          }
        }
      },
      labels: ["Cricket"]
    };
  }
}

AppModule

import { NgApexchartsModule } from 'ng-apexcharts';

@NgModule({
  declarations: [AppComponent],
  imports: [
    NgApexchartsModule
]

pakage.json

"dependencies": {
  "@angular-slider/ngx-slider": "^2.0.4",
  "@angular/animations": "~12.0.0",
  "@angular/common": "~12.0.0",
  "@angular/compiler": "~12.0.0",
  "apexcharts": "^3.36.3",
  "ng-apexcharts": "^1.7.4"
  },
  "devDependencies": {
  "@angular-devkit/build-angular": "~12.0.0",
  "@angular/cli": "~12.0.0",
  "@angular/compiler-cli": "~12.0.0",
  "@types/file-saver": "^2.0.5",
  "@types/jasmine": "~3.6.0",
  "@types/node": "^12.11.1",
  "jasmine-core": "~3.7.0",
  "karma": "~6.3.0",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage": "~2.0.3",
  "karma-jasmine": "~4.0.0",
  "karma-jasmine-html-reporter": "^1.5.0",
  "typescript": "~4.2.3"
}

also included in angular.json

"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
]

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.