apexcharts / ng-apexcharts

ng-apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.
MIT License
320 stars 80 forks source link

angular 8/9 + ivy problem #25

Closed mits87 closed 2 months ago

mits87 commented 5 years ago

Hello,

I have problem with ng-apexcharts and angular 8 or 9 with ivy compiler. Let's say I have the template:

<apx-chart
  [chart]="data.options.chart"
  [labels]="data.options.labels"
  [legend]="data.options.legend"
  [dataLabels]="data.options.dataLabels"
  [series]="data.series"
></apx-chart>

and configuration:

  data = {
    options: {
      dataLabels: {
        enabled: false,
      },
      legend: {
        position: 'bottom',
      },
      labels: ['AirBnB', 'Booking', 'Booking'],
      chart: {
        height: '360',
        type: 'donut'
      },
    },
    series: [55, 35, 10]
  };

Everything is extremely easy. But when I use that with ivy compiler (doesn't matter 8 or 9 version of angular) then I got an error:

ERROR in src/app/panel/statistics/statistics.component.html:2:3 - error TS2322: Type '{ height: string; type: string; }' is not assignable to type 'ApexChart'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type 'ChartType'.

2   [chart]="data.options.chart"
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/panel/statistics/statistics.component.ts:6:16
    6   templateUrl: './statistics.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component StatisticsComponent.
src/app/panel/statistics/statistics.component.html:4:3 - error TS2322: Type '{ position: string; }' is not assignable to type 'ApexLegend'.
  Types of property 'position' are incompatible.
    Type 'string' is not assignable to type '"bottom" | "top" | "right" | "left"'.

4   [legend]="data.options.legend"
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/panel/statistics/statistics.component.ts:6:16
    6   templateUrl: './statistics.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component StatisticsComponent.

Can you help me with that?

Carniatto commented 4 years ago

I'm using with ivy for over 4 months no issues

igorkemack commented 4 years ago

After release of angular 9.0 problem is back. I'm trying to add NgApexchartsModule to my module imports and build prod fails. It throws:

Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got null

ng version

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.5
@angular-devkit/build-angular      0.900.5
@angular-devkit/build-ng-packagr   0.900.5
@angular-devkit/build-optimizer    0.900.5
@angular-devkit/build-webpack      0.900.5
@angular-devkit/core               9.0.5
@angular-devkit/schematics         9.0.5
@angular/cdk                       9.1.1
@angular/http                      7.2.15
@angular/material                  9.1.1
@angular/material-moment-adapter   9.1.1
@ngtools/webpack                   9.0.5
@schematics/angular                9.0.5
@schematics/update                 0.900.5
ng-packagr                         9.0.3
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

apexcharts: 3.15.0 ng-apexcharts: 1.2.1

junedchhipa commented 4 years ago

@igorkemack This issue Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got null was fixed recently. Please update apexcharts to v3.16.1 and it will get resolved automatically.

rochapablo commented 3 years ago

I'm also getting

Error: src/app/template.html:16:39 - error TS2322: Type '{ type: string; }' is not assignable to type 'ApexChart'.
  Types of property 'type' are incompatible.
    Type 'string' is not assignable to type 'ChartType'.

16 <apx-chart [series]="options.series" [chart]="options.chart" [title]="options.title"></apx-chart>

But, adding any seems to work.

public options: any = {
    title: {
      text: 'test'
    },
    chart: {
      type: 'bar'
    },
    series: [
      {
        name: 'sales',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }
    ],
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
    }
  };
"@angular": "~11.2.1",
"apexcharts": "^3.25.0",
"ng-apexcharts": "^1.5.8",
github-actions[bot] commented 2 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.