<!-- google Chart Data-->
  export var areaChart1 = {
    chartType: 'AreaChart',
    dataTable: [
      ['Year', 'Sales', 'Expenses'],
      ['2020', 1000, 400],
      ['2021', 1170, 460],
      ['2022', 660, 1120],
      ['2024', 1030, 540],
    ],
    options: {
      title: 'Company Performance',
      hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
      vAxis: { minValue: 0 },
      width: '100%',
      height: 400,
      colors: [primary_color, secondary_color],
      backgroundColor: 'transparent',
    },
  };                    
                    

import { Component } from '@angular/core';
import * as chartData from '../../../../shared/data/charts/google-chart';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';

@Component({
    selector: 'app-area-chart1',
    templateUrl: './area-chart1.html',
    styleUrls: ['./area-chart1.scss'],
    imports: [Ng2GoogleChartsModule]
})
export class AreaChart1 {

  public areaChart1 = chartData.areaChart1

}

<!-- Chartjs charts data-->
import { ChartDataset, ChartOptions, ChartType } from 'chart.js';

let primary_color =  '#2B5F60';
let secondary_color = '#C06240';

export const barChart = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  responsive: false,
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(43, 94, 94, 0.4)',
      borderColor: primary_color,
      borderWidth: 2,
      data: [35, 59, 80, 81, 56, 55, 40],
    },
    {
      label: 'My Second dataset',
      borderColor: secondary_color,
      backgroundColor: 'rgba(192, 98, 64, 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,
    },
  ],
};

<!-- Chart-js.ts file-->
  import { Component } from '@angular/core';

  import { BarController, BarElement, CategoryScale, LinearScale } from 'chart.js';
  import { BaseChartDirective, provideCharts } from 'ng2-charts';
  
  import { barChart } from '../../../../shared/data/charts/chartsjs';
  
  @Component({
    selector: 'app-bars-chart',
    templateUrl: './bars-chart.html',
    styleUrls: ['./bars-chart.scss'],
    imports: [BaseChartDirective],
    providers: [
      provideCharts({
        registerables: [BarController, CategoryScale, LinearScale, BarElement],
      }),
    ],
  })
  export class BarsChart {
    public barChart = barChart;
  }                                    

<!-- Chart-js.ts file-->
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideCharts, withDefaultRegisterables } from 'ng2-charts';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    provideAnimations(),
    provideCharts(withDefaultRegisterables()),
  ]
};

<!-- html file-->
<x-chartist [configuration]="chart1"></x-chartist>

<!-- data file-->
import * as Chartist from 'chartist';
import { BarChartConfiguration, LineChartConfiguration, PieChartConfiguration } from 'ng-chartist

var seq: number = 0;
var delays: number = 80;
var durations: number = 500;

let primary_color = localStorage.getItem('primary_color') || '#2B5F60';
let secondary_color = localStorage.getItem('secondary_color') || '#C06240';

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

<!-- ts file-->
import { Component } from '@angular/core';
import * as chartData from '../../../../shared/data/charts/chartist';
import { ChartistModule } from 'ng-chartist';

@Component({
    selector: 'app-advanced-smil',
    templateUrl: './advanced-smil.html',
    styleUrls: ['./advanced-smil.scss'],
    imports: [ChartistModule]
})

export class AdvancedSmil {

  public chart1 = chartData.chart1;

}