Install

---

                         	
npm install apexcharts ng-apexcharts --save
							
						

Include apex chart js file in angular.json file like this:

                                    
"scripts": [
    "node_modules/apexcharts/dist/apexcharts.min.js"
]
							
						

Add ng-apexcharts-module to imports

                                    
import { NgApexchartsModule } from 'ng-apexcharts';

imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgApexchartsModule,
...
]
							
						

ApexchartComponent class in apexchart.component.ts would look like this

---

                                    
import { Component, ViewChild } from "@angular/core";

import {
    ChartComponent,
    ApexAxisChartSeries,
    ApexChart,
    ApexXAxis,
    ApexTitleSubtitle
} 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.css"]
})
export class AppComponent {
    @ViewChild("chart") chart: ChartComponent;
    public chartOptions: Partial;

    constructor() {
    this.chartOptions = {
        series: [
        {
            name: "My-series",
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }
        ],
        chart: {
        height: 350,
        type: "bar"
        },
        title: {
        text: "My First Angular Chart"
        },
        xaxis: {
        categories: ["Jan", "Feb",  "Mar",  "Apr",  "May",  "Jun",  "Jul",  "Aug", "Sep"]
        }
    };
    }
}
							
						

apexchart.component.html would look like this

---

                         	
<div style="text-align:center">
    <apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [xaxis]="chartOptions.xaxis"
    [title]="chartOptions.title"
    > </apx-chart>
</div>
                             
							
						

Type	URL
apex chart	https://apexcharts.com/docs/angular-charts/