<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]
    }
  };
}

<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 i --save ng-chartist chartist

npm i --save-dev @types/chartist

<x-chartist [configuration]="chart1"></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 {

  export var chart1: 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: 250,
    },
  };
}

npm i 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 { basicAreaChart } from '../../../../../shared/data/chart/apex-chart';
import { NgApexchartsModule } from 'ng-apexcharts';
import {BasicChart} from '../../interface/charts/apex-charts';


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: 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:[ primary ]
  };
}