Type 'undefined' is not assignable to type 'ApexAxisChartSeries | ApexNonAxisChartSeries'

Question

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

Answer 1

The only solution that worked for me was adding the word "any", as in the code below:

public pieChartOptionss!: Partial<pieChartOptionss> | any;

Answer 2

what you need is to to type your own interface

export interface ApexOptions {
  annotations?: ApexAnnotations;
  chart?: ApexChart;
  colors?: any[];
  dataLabels?: ApexDataLabels;
  fill?: ApexFill;
  forecastDataPoints?: ApexForecastDataPoints;
  grid?: ApexGrid;
  labels?: string[];
  legend?: ApexLegend;
  markers?: ApexMarkers;
  noData?: ApexNoData;
  plotOptions?: ApexPlotOptions;
  responsive?: ApexResponsive[];
  series: ApexAxisChartSeries | ApexNonAxisChartSeries;
  states?: ApexStates;
  stroke?: ApexStroke;
  subtitle?: ApexTitleSubtitle;
  theme?: ApexTheme;
  title?: ApexTitleSubtitle;
  tooltip?: ApexTooltip;
  xaxis?: ApexXAxis;
  yaxis?: ApexYAxis | ApexYAxis[];
}

and remove the question mark from any property that you will provide

Answer 3

based on the error, i assume the values for pieChartOptionss?.series, pieChartOptionss?.chart,pieChartOptionss?.labels, and etc.. are null in the initial render.

Adding these checks in *ngIf should avoid these errors

<div class="body" *ngIf="pieChartOptionss?.series && pieChartOptionss?.chart && ... ">
</div>

Alternatively, you have a function that does this check for you in the component.ts file rather than having this in component.html

in component.ts

public validateOptions(options: pieChartOptionss): bool {
   return options?.series && options?.chart && ...
}

in component.html

<div class="body" *ngIf="validateOptions(pieChartOptionss)">
</div>

Answer 4

Use interface for 'pieChartOptions' instead of a type then initialize 'pieChartOptionss' variable with empty object(Type as a pieChartOptions)

export interface pieChartOptions {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  legend: ApexLegend;
  dataLabels: ApexDataLabels;
  responsive: ApexResponsive[];
  labels?: any;
};

 public pieChartOptionss: pieChartOptions = {} pieChartOptions;