5

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

7 Answers 7

23

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

public pieChartOptionss!: Partial<pieChartOptionss> | any;
8

The solution to me was putting "!" at the end of the properties on html. Like this:

<div id="chart">
<apx-chart [series]="chartOptions.series!" [chart]="chartOptions.chart!" [plotOptions]="chartOptions.plotOptions!"
    [labels]="chartOptions.labels!">
</apx-chart>
</div>
2

The problem here is that you are defining as Partial:

public pieChartOptionss!: Partial<pieChartOptionss>;

Rather than the accepted answer of adding an any, you can directly remove the Partial as:

public pieChartOptionss!: pieChartOptionss;

Now your html will not complain any more.

1

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

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Dec 26, 2021 at 3:32
0

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>
1
  • The solution works, however, I do not think it is right to call a function in a template in angular. The first option seems okay than the latter.
    – Onen simon
    Commented Oct 17, 2021 at 20:50
0

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;
0

Modify this code:

public pieChartOptionss!: Partial<pieChartOptionss>;

To this:

public pieChartOptionss!: pieChartOptionss;

It works for me in ng-apexcharts version 1.10.0.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.