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 {

  export const barChart = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    responsive: false,
    datasets: [
      {
        label: 'My First dataset',
        borderColor: primaryColor,
        backgroundColor: 'rgba(148, 196, 255, 0.6)',
        borderWidth: 2,
        data: [35, 59, 80, 81, 56, 55, 40],
      },
      {
        label: 'My Second dataset',
        borderColor: secondaryColor,
        backgroundColor: 'rgb(131,131,131,0.6)',
        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,
      },
    ],
  };

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';
import { LineChartConfiguration } from 'ng-chartist';

@Component({
  selector: 'app-chartist-chart',
  imports : [ChartistModule],
  templateUrl: './chartist-chart.html',
  styleUrl: './chartist-chart.scss'
})
export class ChartistChart {

  export const advanceSMILChart: LineChartConfiguration = {
    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,
      height: 400,
    },
  }
};

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 {
  ApexChart,
  ApexDataLabels,
  ApexStroke
  ApexAxisChartSeries,
  ApexTitleSubtitle,
  ApexXAxis,
  ApexYAxis,
  ApexLegend,
} from "ng-apexcharts";

export interface BasicChart {
  chart: ApexChart;
  dataLabels: ApexDataLabels;
  stroke: ApexStroke;
  series: ApexAxisChartSeries;
  title: ApexTitleSubtitle;
  subtitle: ApexTitleSubtitle;
  labels: string[];
  yaxis: ApexYAxis;
  xaxis: ApexXAxis;
  legend: ApexLegend;
  colors: string[];
}

@Component({
  selector: 'app-apex-chart',
  imports:[NgApexchartsModule],
  templateUrl: './apex-chart.html',
  styleUrl: './apex-chart.scss'
})
export class ApexChart {
  export const basicChart: BasicChart = {
    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: [primaryColor],
  };
}

npm uninstall apexcharts ng-apexcharts