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

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

export class AreaChart1 {

  public areaChart1 = chartData.areaChart1

}

    import { GoogleChartType } from "ng2-google-charts";

    let primary_color = localStorage.getItem('primary_color') || '#678f44';
    let secondary_color = localStorage.getItem('secondary_color') || '#d1823f';

    export var areaChart1 = {
        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 },
            width: '100%',
            height: 400,
            colors: [primary_color, secondary_color],
            backgroundColor: 'transparent'
        },
    };

import { ChartType } from "chart.js";

let primary_color =  '#678f44';
let secondary_color =  '#d1823f';

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

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

@Component({
    selector: 'app-bars-chart',
    templateUrl: './bars-chart.html',
    styleUrls: ['./bars-chart.scss'],
    standalone: true,
    imports: [BaseChartDirective]
})

export class BarsChart {

  public barChart = chartData.barChart;

}

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()),
  ]
};

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

import { Component } from '@angular/core';
import * as chartData from '../../../../shared/data/chart/chartist';
import { ChartistModule } from 'ng-chartist';

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

  public chart1 = chartData.chart1;

}

import { LineChartConfiguration } from 'ng-chartist

let primary_color = localStorage.getItem('primary_color') || '#678f44';
let secondary_color = localStorage.getItem('secondary_color') || '#d1823f';

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