npm install ng2-google-charts

<google-chart [data]="areaChart"></google-chart>

import { Component } from '@angular/core';
  import { Ng2GoogleChartsModule } from "ng2-google-charts";
  
  @Component({
    selector: 'app-google-chart',
    imports: [Ng2GoogleChartsModule],
    templateUrl: './google-chart.html',
    styleUrl: './google-chart.scss'
  })
  export class GoogleChart {
  
    public areaChart = {
      chartType: 'AreaChart',
      dataTable: [
        ['Year', 'Sales', 'Expenses'],
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
      ],
      options: {
        title: 'Company Performance',
        hAxis: {title: 'Year',  titleTextStyle: {color: '#333'} },
        vAxis: {minValue: 0, ticks: [0, 300, 600, 900, 1200]},
        width:'100%',
        height: 400,
        colors: [primary, secondary]
      }
    };
  }

npm uninstall ng2-google-charts

npm install ng2-charts

npm install chart.js

<canvas baseChart class="chart" [data]="barChart" [legend]="barChartLegend" [datasets]="barChart.datasets" [options]="barChart.barOptions"></canvas>

import { Component } from '@angular/core';
  import { BaseChartDirective } from 'ng2-charts';
  
  @Component({
    selector: 'app-chart-js',
    imports: [BaseChartDirective],
    templateUrl: './chart-js.html',
    styleUrl: './chart-js.scss'
  })
  export class ChartJs {
  
    public barChart = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    responsive: true,
    datasets: [{
      label: "My First dataset",
      borderColor: primary,
      backgroundColor: 'rgba(115, 102 ,255, 0.4)',
      borderWidth: 2,
      data: [35, 59, 80, 81, 56, 55, 40]
    },
    {
      label: "My Second dataset",
      borderColor: secondary,
      backgroundColor: 'rgba(247, 49, 100, 0.4)',
      borderWidth: 2,
      data: [28, 48, 40, 19, 86, 27, 90]
    }],
    barOptions : [
      {
        scaleBeginAtZero: true,
        scaleShowGridLines: true,
        scaleGridLineColor: "rgba(0,0,0,0.1)",
        scaleGridLineWidth: 1,
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: true,
        barShowStroke: true,
        barStrokeWidth: 2,
        barValueSpacing: 5,
        barDatasetSpacing: 1,
      }
    ]
  };
    public barChartLegend = false;
  
    public barChartOptions = {
      responsive: false,
    };
  }

npm uninstall ng2-charts

npm uninstall ng2-charts

npm install ng-chartist

<x-chartist [configuration]="advanceSMILChart"></x-chartist>

import { Component } from '@angular/core';
  import { ChartistModule } from 'ng-chartist';
  
  @Component({
    selector: 'app-chartist-chart',
    imports : [ChartistModule],
    templateUrl: './chartist-chart.html',
    styleUrl: './chartist-chart.scss'
  })
  export class ChartistChart {
  
    public advanceSMILChart = {
    type: 'Line',
    data: {
      labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', ""],
      series: [
        [12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
        [4,  5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
        [5,  3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
        [3,  4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
      ]
    },
    options: {
      low: 0,
      showArea: false,
      fullWidth: true,
      colors: [primary, secondary]
    },
    events: {
      draw: (data: any) => {
        seq++;
        if(data.type === 'line') {
          data.element.animate({
            opacity: {
              begin: seq * delays + 1000,
              dur: durations,
              from: 0,
              to: 1
            }
          });
        } else if(data.type === 'label' && data.axis === 'x') {
          data.element.animate({
            y: {
              begin: seq * delays,
              dur: durations,
              from: data.y + 100,
              to: data.y,
              easing: 'easeOutQuart'
            }
          });
        } else if(data.type === 'label' && data.axis === 'y') {
          data.element.animate({
            x: {
              begin: seq * delays,
              dur: durations,
              from: data.x - 100,
              to: data.x,
              easing: 'easeOutQuart'
            }
          });
        } else if(data.type === 'point') {
          data.element.animate({
            x1: {
              begin: seq * delays,
              dur: durations,
              from: data.x - 10,
              to: data.x,
              easing: 'easeOutQuart'
            },
            x2: {
              begin: seq * delays,
              dur: durations,
              from: data.x - 10,
              to: data.x,
              easing: 'easeOutQuart'
            },
            opacity: {
              begin: seq * delays,
              dur: durations,
              from: 0,
              to: 1,
              easing: 'easeOutQuart'
            }
          });
        } else if(data.type === 'grid') {
          var pos1Animation = {
            begin: seq * delays,
            dur: durations,
            from: data[data.axis.units.pos + '1'] - 30,
            to: data[data.axis.units.pos + '1'],
            easing: 'easeOutQuart'
          };
          var pos2Animation = {
            begin: seq * delays,
            dur: durations,
            from: data[data.axis.units.pos + '2'] - 100,
            to: data[data.axis.units.pos + '2'],
            easing: 'easeOutQuart'
          };
          var animations : any = {};
          animations[data.axis.units.pos + '1'] = pos1Animation;
          animations[data.axis.units.pos + '2'] = pos2Animation;
          animations['opacity'] = {
            begin: seq * delays,
            dur: durations,
            from: 0,
            to: 1,
            easing: 'easeOutQuart'
          };
          data.element.animate(animations);
        }
      }
    }
  };
  
  }

npm uninstall ng-chartist

npm install apexcharts ng-apexcharts

<apx-chart [chart]="basicAreaChart.chart" [dataLabels]="basicAreaChart.dataLabels" [stroke]="basicAreaChart.stroke"
    [series]="basicAreaChart.series" [title]="basicAreaChart.title" [subtitle]="basicAreaChart.subtitle"
    [labels]="basicAreaChart.labels" [xaxis]="basicAreaChart.xaxis" [yaxis]="basicAreaChart.yaxis"
    [legend]="basicAreaChart.legend" [colors]="basicAreaChart.colors">
  </apx-chart>

import { Component } from '@angular/core';
  import { NgApexchartsModule } from 'ng-apexcharts';
  import {
    ApexNonAxisChartSeries,
    ApexPlotOptions,
    ApexChart,
    ApexLegend,
    ApexResponsive,
    ApexStroke
  } from "ng-apexcharts";
  
  export type chartOptions = {
    series: ApexNonAxisChartSeries;
    chart: ApexChart;
    labels: any;
    colors: any;
    legend: ApexLegend;
    plotOptions: ApexPlotOptions;
    responsive: ApexResponsive | ApexResponsive[];
    stroke: ApexStroke
  };
  
  @Component({
    selector: 'app-apex-chart',
    imports:[NgApexchartsModule],
    templateUrl: './apex-chart.html',
    styleUrl: './apex-chart.scss'
  })
  export class ApexChart {
  
    public basicAreaChart: chartOptions = {
    chart: {
        height: 350,
        type: 'area',
        zoom: {
            enabled: false
        },
        toolbar:{
          show: false
        }
      },
      dataLabels: {
          enabled: false
      },
      stroke: {
          curve: 'straight'
      },
      series: [{
          name: "STOCK ABC",
          data: series.monthDataSeries1.prices
      }],
      title: {
          text: 'Fundamental Analysis of Stocks',
          align: 'left'
      },
      subtitle: {
          text: 'Price Movements',
          align: 'left'
      },
      labels: series.monthDataSeries1.dates,
      xaxis: {
          type: 'datetime',
      },
      yaxis: {
          opposite: true
      },
      legend: {
          horizontalAlign: 'left'
      },
      colors:[ primary ]
    };
  }

npm uninstall apexcharts ng-apexcharts