Angular v18 - pie chart not visible

I have upgraded my code from angular v9 to v18, but I am unable to view pie charts now.

Below is the ts,

import { Component, OnInit } from '@angular/core';
import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { Chart, registerables } from 'chart.js';
import { ChartType, ChartOptions } from 'chart.js'; // Use chart.js for these types
import moment from 'moment'; // Use default import for moment.js
import { CampaignService } from 'Services/Campaign/campaign.service';
import { CampaignsDetails, DeviceStatus, PieChartData } from 'Classes/Campaign/campaign';
import { ActivatedRoute } from '@angular/router';
import { ValidationService } from 'Services/Validation/validation.service';

interface status {
type: string;
deviceId: string;
passed: number;
failed: number;
}

const deviceStatus: status[] = [
{
type: 'Mobile',
deviceId: 'as2uu',
passed: 121,
failed: 12
},
{
type: 'Box',
deviceId: 'asjkd43as',
passed: 112,
failed: 18
}
];

Chart.register(...registerables);

@Component({
selector: 'campaigniterationoverview',
templateUrl: './campaign-iteration-overview.component.html',
styleUrls: ['./campaign-iteration-overview.component.css']
})
export class CampaignIterationOverviewComponent implements OnInit {
deviceStatus = deviceStatus;
test_total = null;
test_failed = null;
test_passed = null;
test_skipped = null;
overviewDateBegin: any = null;
overviewDateEnd: any = null;
duration = null;
campName = null;
campBranch = null;
failureData: any = null;
ErrorData: any = null;
deviceData: any = null;
dataLoaded = false;
failureEmpty = false;
errorEmpty = false;
status = [];
campView = '';
campaignId = null;
dateBegin: any = null;
dateEnd: any = null;
validationData: any = [];

// Doughnut chart data and labels
public doughnutChartData: number[] = null;
public doughnutChartLabels: string[] = ['Number of test cases failed', 'Number of test cases passed', 'Number of test cases skipped', 'Number of test cases executed'];
public doughnutChartType: ChartType = 'doughnut';

// Pie chart options, data, and labels
public pieChartOptions: ChartOptions = { responsive: true };
public pieChartType: ChartType = 'pie';
public pieChartLegend = true;
public pieChartPlugins = [];
public pieChartLabels: string[] = null;
public pieChartData: number[] = null;
public pieChartLabels2: string[] = null;
public pieChartData2: number[] = null;

constructor(
public CampaignService: CampaignService,
public ValidationService: ValidationService,
private route: ActivatedRoute
) { }

ngOnInit(): void {
console.log("overview init");
this.campName = this.route.snapshot.params['camp_name'];
this.campBranch = this.route.snapshot.params['camp_branch'];
this.campView = this.route.snapshot.params['camp_view'];
this.dateBegin = this.route.snapshot.params['camp_begin'];
this.campaignId = this.route.snapshot.params['campaign_id'];

this.loadData();
}

loadData() {
console.log("load data");
this.dataLoaded = false;
let campaign_name = this.campName;
let branch = this.campBranch;
let type = this.campView;

return this.ValidationService.getCampaignDetails(campaign_name, branch, type).subscribe((result: CampaignsDetails) => {
this.validationData = result.campaigns;
console.log("validation data ", this.validationData);
this.loadOverviewData();
},
err => { console.log('Error --> ', err) })
}

loadOverviewData() {
console.log("load overview data ");
let temp = this.dateBegin;
console.log("temp ", temp);
console.log("validation data ", this.validationData);
this.validationData.forEach(element => {
if (element.begin === temp) {
this.test_passed = element.tests_passed;
this.test_failed = element.tests_failed;
this.test_skipped = element.tests_skipped;
this.test_total = element.tests_total;
this.dateEnd = element.end;
}
});
this.resolveOverviewData();
}

resolveOverviewData() {
console.log("resolve overview data ");
if (this.test_failed === undefined) {
this.test_failed = 0;
this.test_total = this.test_passed + this.test_skipped;
}
if (this.test_passed === undefined) {
this.test_passed = 0;
this.test_total = this.test_failed + this.test_skipped;
}
if (this.test_skipped === undefined) {
this.test_skipped = 0;
this.test_total = this.test_failed + this.test_passed;
}
this.overviewDateBegin = moment(this.dateBegin).format('MMMM Do YYYY, h:mm:ss a');
this.overviewDateEnd = moment(this.dateEnd).format('MMMM Do YYYY, h:mm:ss a');
var date1 = moment(this.dateBegin);
var date2 = moment(this.dateEnd);
this.duration = moment.utc(moment(date2, "DD/MM/YYYY HH:mm:ss").diff(moment(date1, "DD/MM/YYYY HH:mm:ss"))).format("HH:mm:ss");

// Set data for doughnut chart
this.doughnutChartData = [this.test_failed, this.test_passed, this.test_skipped, this.test_total];
this.getFailureCategory();
}

getFailureCategory() {
return this.CampaignService.getFailureCategory(this.campaignId).subscribe((result: PieChartData) => {
this.failureData = result;

if (this.failureData !== null && this.failureData !== undefined) {
this.pieChartLabels = this.failureData.labels;
this.pieChartData = this.failureData.values;
if (this.pieChartLabels.length === 0) {
this.pieChartLabels.push('No data to display');
this.pieChartData.push(0);
}
this.getFailureError();
}
},
err => { console.log('Error --> ', err) });
}

getFailureError() {
return this.CampaignService.getFailureError(this.campaignId).subscribe((result: PieChartData) => {
this.ErrorData = result;

if (this.ErrorData !== null && this.ErrorData !== undefined) {
this.pieChartLabels2 = this.ErrorData.labels;
this.pieChartData2 = this.ErrorData.values;
if (this.pieChartLabels2.length === 0) {
this.pieChartLabels2.push('No data to display');
this.pieChartData2.push(0);
}
this.getDeviceStatus();
}
},
err => {});
}

getDeviceStatus() {
return this.CampaignService.getDeviceStatus(this.campaignId).subscribe((result: DeviceStatus[]) => {
this.deviceData = result;
this.dataLoaded = true;
},
err => {});
}
}`


Below is my HTML,

<div style="margin-top: 2%;">
<campaigniterationsidebar></campaigniterationsidebar>
<div class="card divRight">
<div class="card-body">
<h2 class="card-title">Global Overview</h2>
<!-- <div style="float: left;"> -->
<div class="spinner-border text-primary" role="status" [hidden]="dataLoaded"></div>
<div style="float: left;" *ngIf="dataLoaded">
<p class="card-text"><u><i>Campaign</i></u> : <b>{{ campName }}</b></p>
<p class="card-text"><u><i>Branch</i></u> : <b>{{ campBranch }}</b></p>
<p class="card-text"><u><i>Begin Date</i></u> : <b>{{ overviewDateBegin }}</b></p>
<p class="card-text"><u><i>End Date</i></u> : <b>{{ overviewDateEnd }}</b></p>
<p class="card-text"><u><i>Duration</i></u> : <b>{{ duration }}</b></p>
<p class="card-text"><u><i>Number of test cases passed</i></u> : <b>{{ test_passed }}</b></p>
<p class="card-text"><u><i>Number of test cases failed</i></u> : <b>{{ test_failed }}</b></p>
<p class="card-text"><u><i>Number of test cases skipped</i></u> : <b>{{ test_skipped }}</b></p>
<p class="card-text"><u><i>Number of test cases executed</i></u> : <b>{{ test_total }}</b></p>
</div>
<!-- <div style="display: block; width: 50%; height: 50%; float: right;"> -->
<div style="display: block; width: 50%; height: 50%; float: right;" *ngIf="dataLoaded">
<canvas baseChart [data]="doughnutChartData" [labels]="doughnutChartLabels" [type]="doughnutChartType">
</canvas>
</div>
</div>
</div>


<div class="divRightBelow">
<div class="col-sm-6" style="float: left; margin-bottom: 2%;">
<div class="card">
<div class="card-body">
<h2 class="card-title" >Failure distribution by error type </h2>
<div class="spinner-border text-primary" role="status" [hidden]="dataLoaded"></div>
<div class="divCard" *ngIf="dataLoaded">

<canvas baseChart [data]="pieChartData2" [labels]="pieChartLabels2" [type]="pieChartType"
[options]="pieChartOptions" [plugins]="pieChartPlugins" [legend]="pieChartLegend">
</canvas>
</div>
</div>
</div>
</div>
<div class="col-sm-6" style="float: right; margin-bottom: 2%;">
<div class="card">
<div class="card-body">
<h2 class="card-title">Failure distribution by category</h2>

<div class="spinner-border text-primary" role="status" [hidden]="dataLoaded"></div>
<div class="divCard" *ngIf="dataLoaded">
<p *ngIf="failureEmpty">No data to display</p>
<canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [type]="pieChartType"
[options]="pieChartOptions" [plugins]="pieChartPlugins" [legend]="pieChartLegend" >
</canvas>

</div>
</div>
</div>
</div>
</div>
<!-- <div class="card divRightBottom">
<div class="card-body">
<h2 class="card-title">Failure distribution by error type</h2>
<div class="spinner-border text-primary" role="status" [hidden]="dataLoaded"></div>
<div class="divCard" *ngIf="dataLoaded">

<canvas baseChart [data]="pieChartData2" [labels]="pieChartLabels2" [chartType]="pieChartType"
[options]="pieChartOptions" [plugins]="pieChartPlugins" [legend]="pieChartLegend">
</canvas>
</div>

</div>
</div>
<div class="card divRightBottom">
<div class="card-body">
<h2 class="card-title">Failure distribution by category</h2>
<div class="spinner-border text-primary" role="status" [hidden]="dataLoaded"></div>
<div class="divCard" *ngIf="dataLoaded">
<p *ngIf="failureEmpty">No data to display</p>
<canvas baseChart [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType"
[options]="pieChartOptions" [plugins]="pieChartPlugins" [legend]="pieChartLegend" >
</canvas>

</div>

</div>
</div> -->
<div class="card divRightBottom">
<div class="card-body">
<h2 class="card-title">Device Status</h2>
<div class="spinner-border text-primary" role="status" [hidden]="dataLoaded"></div>
<table class="table table-striped" *ngIf="dataLoaded">
<thead>
<tr>
<th scope="col">Device Type</th>
<th scope="col">Device ID</th>
<!-- <th *ngFor="let head of status">{{head}}</th> -->
<th scope="col">Passed</th>
<th scope="col">Failed</th>
<th scope="col">Skipped</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of deviceData | keyvalue">
<td>{{ item.value.device_type }}</td>
<td>{{ item.value.name }}</td>
<td>{{ item.value.passed_tests | number }}</td>
<td>{{ item.value.failed_tests | number }}</td>
<td>{{ item.value.skipped_tests | number }}</td>
</tr>
</tbody>
</table>


</div>
</div>
</div>
<br/>
<br/>


Here is the content for app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, APP_INITIALIZER } from '@angular/core';
import { AppConfigService } from './app-config.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MainSidebarComponent } from './main-sidebar/main-sidebar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { MatToolbarModule } from '@angular/material/toolbar';
import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
import {MatIconModule} from '@angular/material/icon';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatListModule} from '@angular/material/list';
import {MatButtonModule} from '@angular/material/button';
import {NgbPaginationModule, NgbAlertModule} from '@ng-bootstrap/ng-bootstrap';
import { RouterModule } from '@angular/router';
//import { ScrollTopModule } from 'ng-boosted';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { MainCarouselComponent } from './main-carousel/main-carousel.component';
import { FormsModule } from '@angular/forms';
import {MatCardModule} from '@angular/material/card';
import { HomepageComponent } from './homepage/homepage.component';
import { FooterComponent } from './footer/footer.component';
import { ValidationViewComponent } from './validation-view/validation-view.component';
import {MatTabsModule} from '@angular/material/tabs';
import { InformationCardComponent } from './information-card/information-card.component';
import { ValidationDetailsComponent } from './validation-details/validation-details.component';
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
import { CampaignIterationOverviewComponent } from './campaign-iteration-overview/campaign-iteration-overview.component';
import { SupervisionViewComponent } from './supervision-view/supervision-view.component';
import { InfraViewComponent } from './infra-view/infra-view.component';
import { UserMgmtInfoComponent } from './user-mgmt-info/user-mgmt-info.component';
import {MatCheckboxModule} from '@angular/material/checkbox';
import { UserMgmtMenuComponent } from './user-mgmt-menu/user-mgmt-menu.component';
import { UserMgmtChainComponent } from './user-mgmt-chain/user-mgmt-chain.component';
import { ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { DialogBodyComponent } from './dialog-body/dialog-body.component';
import { UserMgmtWidgetComponent } from './user-mgmt-widget/user-mgmt-widget.component';
import { UserMgmtAdminComponent } from './user-mgmt-admin/user-mgmt-admin.component';
import {MatTableModule} from '@angular/material/table';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatSelectModule} from '@angular/material/select';
import { DialogBodyUsrComponent } from './dialog-body-usr/dialog-body-usr.component';
import { MatPaginatorModule } from '@angular/material/paginator';
import { CampaignIterationDetailsComponent } from './campaign-iteration-details/campaign-iteration-details.component';
import { CampaignIterationSidebarComponent } from './campaign-iteration-sidebar/campaign-iteration-sidebar.component';
import {MatTreeModule} from '@angular/material/tree';
import { DialogBodyNewsComponent } from './dialog-body-news/dialog-body-news.component';
import { QuillModule } from 'ngx-quill';
import { LoginComponent } from './login/login.component';
import { ToastComponent } from './toast/toast.component';
import { ForbiddenComponent } from './forbidden/forbidden.component';
import { ExportComponent } from './export/export.component';
import { ExportAsModule } from 'ngx-export-as';
import { BreadcrumbComponent } from './breadcrumb/breadcrumb.component';
import { InvalidComponent } from './invalid/invalid.component';
import { NgxSpinnerModule } from 'ngx-spinner';
import { MdbModalModule } from 'mdb-angular-ui-kit/modal';
import { DialogDelUsrComponent } from './dialog-del-usr/dialog-del-usr.component';
import { RequestInterceptorService } from 'Services/RequestInterceptor/request-interceptor.service';
import { HistTabComponent } from './hist-tab/hist-tab.component';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import { MatTooltipModule } from '@angular/material/tooltip';
import {MatRadioModule} from '@angular/material/radio';
import { ValidChainAdminComponent } from './valid-chain-admin/valid-chain-admin.component';
import { SuperChainAdminComponent } from './super-chain-admin/super-chain-admin.component';
import { GlobalAdminComponent } from './global-admin/global-admin.component';
import { DialogDelChainComponent } from './dialog-del-chain/dialog-del-chain.component';
import { DialogBodyChainComponent } from './dialog-body-chain/dialog-body-chain.component';
import { ChainManagementComponent } from './chain-management/chain-management.component';
import { ChainAdministrationComponent } from './chain-administration/chain-administration.component';
import { OrderByPipe } from 'pipes/orderBy/order-by.pipe';
import { DialogScheduleChainComponent } from './dialog-schedule-chain/dialog-schedule-chain.component';
import { AuthInterceptor } from 'Services/RequestInterceptor/auth-interceptor.service';
import { AppLoginService } from './app-login.service';



const appInitializerFn = (appConfig: AppConfigService, appLogin: AppLoginService) => {
return () => {
appLogin.loadingShow();
return appConfig.loadAppConfig().then(() => {
return appLogin.initializeApp().toPromise();
}).finally(() => {
appLogin.loadingHide(); // Hide spinner after both initializations
}).catch(error => {
console.error("Initialization failed", error);
appLogin.loadingHide();
alert("Initialization Failed");
return Promise.resolve(false);
})
};
};


@NgModule({ declarations: [
AppComponent,
MainSidebarComponent,
MainCarouselComponent,
HomepageComponent,
FooterComponent,
ValidationViewComponent,
InformationCardComponent,
ValidationDetailsComponent,
CampaignIterationOverviewComponent,
SupervisionViewComponent,
InfraViewComponent,
UserMgmtInfoComponent,
UserMgmtMenuComponent,
UserMgmtChainComponent,
DialogBodyComponent,
UserMgmtWidgetComponent,
UserMgmtAdminComponent,
DialogBodyUsrComponent,
CampaignIterationDetailsComponent,
CampaignIterationSidebarComponent,
DialogBodyNewsComponent,
LoginComponent,
ToastComponent,
ForbiddenComponent,
ExportComponent,
BreadcrumbComponent,
InvalidComponent,
DialogDelUsrComponent,
HistTabComponent,
ValidChainAdminComponent,
SuperChainAdminComponent,
GlobalAdminComponent,
DialogDelChainComponent,
DialogBodyChainComponent,
ChainManagementComponent,
ChainAdministrationComponent,
OrderByPipe,
DialogScheduleChainComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
bootstrap: [AppComponent], imports: [BrowserModule,
AppRoutingModule,
NgbModule,
BrowserAnimationsModule,
MatSliderModule,
MatToolbarModule,
MatIconModule,
MatSidenavModule,
MatListModule,
MatButtonModule,
NgbPaginationModule,
NgbAlertModule,
NgbNavModule,
RouterModule,
NgbModule,
FormsModule,
MatCardModule,
MatTabsModule,
BaseChartDirective,
MatCheckboxModule,
ReactiveFormsModule,
MatDialogModule,
MatTableModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatPaginatorModule,
MatTreeModule,
QuillModule.forRoot(),
ExportAsModule,
NgxSpinnerModule,
MdbModalModule,
MatSlideToggleModule,
MatRadioModule], providers: [
AppConfigService,
AppLoginService,
{
provide: APP_INITIALIZER,
useFactory: appInitializerFn,
multi: true,
deps: [AppConfigService, AppLoginService]
},
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
},
{
provide: HTTP_INTERCEPTORS,
useClass: RequestInterceptorService,
multi: true
},
provideHttpClient(withInterceptorsFromDi()),
provideCharts(withDefaultRegisterables())
] })
export class AppModule { }


Content of main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));


Below are the points I have tried:

• I have upgraded chart.js to 4.4.7 and ng2-charts to 6.0.1
• Changed NgChartsModule to BaseChartDirective
• Also added below configuration to app.module

import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';

@NgModule({
imports: [ BaseChartDirective ],
providers: [provideCharts(withDefaultRegisterables())]
})
export class MySubModule { }


I was expecting piechart which is shown below

Expected Piechart

Continue reading...