I have used this code in ts
export type pieChartOptionss = {
series?: ApexNonAxisChartSeries | '';
chart?: ApexChart | '';
legend?: ApexLegend | '';
dataLabels?: ApexDataLabels | '';
responsive?: ApexResponsive[] | '';
labels?: any | '';
};
export class DashboardComponent implements OnInit {
public pieChartOptionss!: Partial<pieChartOptionss>;
}
(response: any) => {
this.user_data = response.results;
console.log('user_data', this.user_data)
this.user_data_true = this.user_data.filter(x => x.is_active === true)
this.user_data_false = this.user_data.filter(x => x.is_active === false)
this.pieChartData = [this.user_data_true.length, this.user_data_false.length];
this.pieChartOptionss = {
series: [this.user_data_true.length, this.user_data_false.length],
chart: {
type: 'donut',
width: 270,
},
legend: {
show: false,
},
dataLabels: {
enabled: true,
},
labels: ['Active', 'Inactive'],
responsive: [
{
breakpoint: 480,
options: {},
},
],
};
}
and in html I have used this code:
<div class="body" *ngIf="pieChartOptionss">
<apx-chart [series]="pieChartOptionss?.series" [chart]="pieChartOptionss?.chart"
[labels]="pieChartOptionss?.labels" [responsive]="pieChartOptionss?.responsive"
[dataLabels]="pieChartOptionss?.dataLabels" [legend]="pieChartOptionss?.legend" class="apex-pie-center">
</apx-chart>
<div class="table-responsive m-t-15">
<table class="table align-items-center">
<tbody>
<tr>
<td><i class="fa fa-circle col-cyan mr-2"></i> {{ "active" | translate }}</td>
<td class="col-blue">{{pieChartOptionss?.series[0]}}</td>
</tr>
<tr>
<td><i class="fa fa-circle col-green mr-2"></i>{{ "inactive" | translate }}</td>
<td class="col-green">{{pieChartOptionss?.series[1]}}</td>
</tr>
</tbody>
</table>
</div>
</div>
The problem is, when I ng serve project show this error:
ERROR in src/app/panel/dashboard/dashboard.component.html:97:26 - error TS2322: Type '"" | ApexNonAxisChartSeries | undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.
Type 'undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'.97 <apx-chart [series]="pieChartOptionss?.series" [chart]="pieChartOptionss?.chart" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent. src/app/panel/dashboard/dashboard.component.html:97:62 - error TS2322: Type '"" | ApexChart | undefined' is not assignable to type 'ApexChart'. Type 'undefined' is not assignable to type 'ApexChart'.
97 <apx-chart [series]="pieChartOptionss?.series" [chart]="pieChartOptionss?.chart" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent. src/app/panel/dashboard/dashboard.component.html:98:53 - error TS2322: Type '"" | ApexResponsive[] | undefined' is not assignable to type 'ApexResponsive[]'. Type 'undefined' is not assignable to type 'ApexResponsive[]'.
98 [labels]="pieChartOptionss?.labels" [responsive]="pieChartOptionss?.responsive" ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent. src/app/panel/dashboard/dashboard.component.html:99:17 - error TS2322: Type '"" | ApexDataLabels | undefined' is not assignable to type 'ApexDataLabels'. Type 'undefined' is not assignable to type 'ApexDataLabels'.
99 [dataLabels]="pieChartOptionss?.dataLabels" [legend]="pieChartOptionss?.legend" class="apex-pie-center"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent. src/app/panel/dashboard/dashboard.component.html:99:61 - error TS2322: Type '"" | ApexLegend | undefined' is not assignable to type 'ApexLegend'. Type 'undefined' is not assignable to type 'ApexLegend'.
99 [dataLabels]="pieChartOptionss?.dataLabels" [legend]="pieChartOptionss?.legend" class="apex-pie-center"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent. src/app/panel/dashboard/dashboard.component.html:106:46 - merror TS2532: Object is possibly 'undefined'.
106 {{pieChartOptionss?.series[0]}} ~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/panel/dashboard/dashboard.component.ts:93:16 93 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent. src/app/panel/dashboard/dashboard.component.html:110:47 - error TS2532: Object is possibly 'undefined'.
110 {{pieChartOptionss?.series[1]}}