Install apex using npm

apex

npm install apexcharts ng-apexcharts --save

Include js file in angular.json file under scripts[]

path

node_modules/apexcharts/dist/apexcharts.min.js

Add NgApexchartsModule into your ChartsNg2Module class. charts.module.ts would look like this

import {NgModule} from '@angular/core';
import { NgApexchartsModule } from 'ng-apexcharts';
import { ApexComponent } from "./apex/apex.component";

@NgModule({
imports: [NgApexchartsModule],
declarations: [ApexComponent],
providers: [ ],
})
export class ChartsNg2Module {

}
            

apex.component.ts would look like this

import { Component } from '@angular/core';
import {
  ApexAxisChartSeries,
  ApexChart,
  ApexXAxis,
  ApexYAxis,
  ApexGrid,
  ApexDataLabels,
  ApexStroke,
  ApexTitleSubtitle,
  ApexTooltip,
  ApexLegend,
  ApexPlotOptions,
  ApexFill,
  ApexMarkers,
  ApexTheme,
  ApexNonAxisChartSeries,
  ApexResponsive
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries | ApexNonAxisChartSeries;
  colors: string[],
  chart: ApexChart;
  xaxis: ApexXAxis;
  yaxis: ApexYAxis | ApexYAxis[],
  title: ApexTitleSubtitle;
  dataLabels: ApexDataLabels,
  stroke: ApexStroke,
  grid: ApexGrid,
  legend?: ApexLegend,
  tooltip?: ApexTooltip,
  plotOptions?: ApexPlotOptions,
  labels?: string[],
  fill: ApexFill,
  markers?: ApexMarkers,
  theme: ApexTheme,
  responsive: ApexResponsive[]
};

var $primary = "#975AFF",
  $success = "#40C057",
  $info = "#2F8BE6",
  $warning = "#F77E17",
  $danger = "#F55252",
  $label_color_light = "#E6EAEE";
var themeColors = [$primary, $warning, $success, $danger, $info];

@Component({
  selector: 'app-apex',
  templateUrl: './apex.component.html',
  styleUrls: ['./apex.component.scss']
})

export class ApexComponent implements OnInit {

  lineChartOptions : Partial;

    constructor() {

      this.lineChartOptions = {
        chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        colors: themeColors,
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'straight'
        },
        series: [{
          name: "Desktops",
          data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
        }],
        title: {
          text: 'Product Trends by Month',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#F5F5F5', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
        },
        yaxis: {
          tickAmount: 5,
        }
      }

    }

}
            

apex.component.html would look like this

  <apx-chart
  [series]="lineChartOptions.series"
  [colors]="lineChartOptions.colors"
  [chart]="lineChartOptions.chart"
  [xaxis]="lineChartOptions.xaxis"
  [yaxis]="lineChartOptions.yaxis"
  [title]="lineChartOptions.title"
  [dataLabels]="lineChartOptions.dataLabels"
  [stroke]="lineChartOptions.stroke"
  [grid]="lineChartOptions.grid"
  [tooltip]="lineChartOptions.tooltip"
  [plotOptions]="lineChartOptions.plotOptions"
  [fill]="lineChartOptions.fill"
  [legend]="lineChartOptions.legend"
  [labels]="lineChartOptions.labels"
  [markers]="lineChartOptions.markers"
  [theme]="lineChartOptions.theme"
  [responsive]="lineChartOptions.responsive"
></apx-chart>