Open Iqra-Niazi opened 8 months ago
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" ]
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
ts file
AppModule
pakage.json
also included in angular.json
"scripts": [ "node_modules/apexcharts/dist/apexcharts.min.js" ]