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.component.html',
  styleUrl: './google-chart.component.scss'
})
export class GoogleChartComponent {

  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.component.html',
  styleUrl: './chart-js.component.scss'
})
export class ChartJsComponent {

  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.component.html',
  styleUrl: './chartist-chart.component.scss'
})
export class ChartistChartComponent {

  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.component.html',
  styleUrl: './apex-chart.component.scss'
})
export class ApexChartComponent {

  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