Charts not working on Angular 17

[matteomelotti]

Hello to everybody, I'm here asking for help trying to get Apexcharts working on latest version of Angular (17.3.3) I created a very simple app:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgApexchartsModule } from 'ng-apexcharts';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    NgApexchartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { ApexAxisChartSeries, ApexChart, ApexXAxis, ApexTitleSubtitle, ChartType } from 'ng-apexcharts';

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  xaxis: ApexXAxis;
  title: ApexTitleSubtitle;
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public chartOptions: Partial<any>;
  public series: ApexAxisChartSeries;
  public chart: ApexChart = { type: 'bar' };

  constructor() {
    this.chartOptions = {
      chart: {
        type: 'bar',
        height: 350
      },
      plotOptions: {
        bar: {
          horizontal: false,
          endingShape: 'rounded'
        },
      },
      dataLabels: {
        enabled: false
      },
      stroke: {
        show: true,
        width: 2,
        colors: ['transparent']
      },
      xaxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
      },
      yaxis: {
        title: {
          text: 'Revenue'
        }
      },
      fill: {
        opacity: 1
      },
      tooltip: {
        y: {
          formatter: function(val: any) {
            return "$ " + val + " thousands"
          }
        }
      }
    };

    this.series = [{
      name: 'Revenue',
      data: [30, 40, 25, 50, 49, 21, 70, 51, 60, 47, 35, 40]
    }];
  }
}

app.component.html

<div id="chart">
  <apx-chart
    [series]="series"
    [chart]="chart"
  ></apx-chart>
</div>

Even if I tried to follow entirely the guide I receive these errors:

'apx-chart' is not a known element:
1. If 'apx-chart' is an Angular component, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Can't bind to 'series' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'series' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Can't bind to 'chart' since it isn't a known property of 'apx-chart'.
1. If 'apx-chart' is an Angular component and it has 'chart' input, then verify that it is part of this module.
2. If 'apx-chart' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

How do you think can I solve these issues?

Thank you

[timl-barrymooring]

We have recently tried to upgrade our application to Angular 17 and are now experiencing this issue. Previously all worked fine using v 1.7.4 of ng-apexcharts and Angular 14.

Tried using the above version of ng-apexcharts and the latest (1.10.0) but neither work.

Is there any update on this?

[kelvinsleonardo]

I'm facing the same issue.

[liriID]

Facing the same issue on Angular 12, using version 1.5.12 worked for me

[timfloors]

Try using version 1.10.0 and don't forget to install apexcharts and ng-apexcharts