export var barChart2: any = {
    chartType: 'BarChart',
    dataTable: [
        ["Element", "Density", {
            role: "style"
        }],
        ["Copper", 10, primary_color],
        ["Silver", 12, secondary_color],
        ["Gold", 14, "#51bb25"],
        ["Platinum", 16, "color: #717171"]
    ],
    options: {
        title: "Density of Precious Metals, in g/cm^3",
        width: '100%',
        height: 400,
        bar: { groupWidth: "95%" },
        legend: { position: "none" },
        backgroundColor: 'transparent'
    },
};

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

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

  public barChart = barChart;

}

import { ChartType } from "chart.js";

 let primary_color = localStorage.getItem('primary_color') || '#35bfbf';
 let secondary_color = localStorage.getItem('secondary_color') || '#FF6150';   

 export var radarGraphOptions: any = {
    scaleShowGridLines: true,
    scaleGridLineColor: "rgba(0,0,0,.2)",
    scaleGridLineWidth: 1,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: true,
    bezierCurve: true,
    bezierCurveTension: 0.4,
    pointDot: true,
    pointDotRadius: 3,
    pointDotStrokeWidth: 1,
    pointHitDetectionRadius: 20,
    datasetStroke: true,
    datasetStrokeWidth: 2,
    datasetFill: true,
    legendTemplate: "
-legend\"><% for (var i=0; i
\"><%if(datasets[i].label){%><%=datasets[i].label%><%}%>
<%}%>
"
    }
};
export var radarGraphLabels: string[] = ["Ford", "Chevy", "Toyota", "Honda", "Mazda"];
export var radarGraphType: ChartType = 'radar';
export var radarGraphLegend = false;
export var radarGraphData: any[] = [
    {
        label: "My First dataset",
        backgroundColor: "rgba(115, 102 ,255, 0.4)",
        borderColor: primary_color,
        pointBackgroundColor: primary_color,
        pointBorderColor: primary_color,
        pointHoverBackgroundColor: primary_color,
        pointHoverBorderColor: "rgba(115, 102 ,255, 0.4)",
        data: [12, 3, 5, 18, 7]
    },
];

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

@Component({
    selector: 'app-chartjs-radargraph',
    templateUrl: './chartjs-radargraph.html',
    styleUrls: ['./chartjs-radargraph.scss'],
    imports: [BaseChartDirective]
})

export class ChartjsRadargraph {

  public radarGraphOptions = chartData.radarGraphOptions;
  public radarGraphLabels = chartData.radarGraphLabels;
  public radarGraphType = chartData.radarGraphType;
  public radarGraphLegend = chartData.radarGraphLegend;
  public radarGraphData = chartData.radarGraphData;
}

// app.config.ts
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),
    provideCharts(withDefaultRegisterables()),
  ]
};

<div class="card">
  <div class="card-header pb-0">
    <h3>Line chart with area</h3>
  </div>
  <div class="card-body">
    <div class="ct-4 flot-chart-container">
      <x-chartist [configuration]="chart5"></x-chartist>
    </div>
  </div>
</div>

import * as Chartist from 'chartist';
var seq: number = 0;
var delays: number = 80;
var durations: number = 500;

let primary = localStorage.getItem('--theme-default') || '#33BFBF';
let secondary = localStorage.getItem('--theme-secondary') || '#ff6150';

export const lineAreaChart : any = {
  type : 'Line',
  data : {
      labels: [1, 2, 3, 4, 5, 6, 7, 8],
    series: [
    [5, 9, 7, 8, 5, 3, 5, 4]
    ]
  },
  options : {
      low: 0,
    showArea: true,
  }
}

import { Component } from '@angular/core';
import { lineAreaChart } from '../../../../shared/data/charts/charts/chartist-chart';
import { ChartistModule } from 'ng-chartist';

@Component({
    selector: 'app-line-area-chart',
    templateUrl: './line-area-chart.html',
    styleUrls: ['./line-area-chart.scss'],
    imports: [ChartistModule]
})
export class LineAreaChart {

  public lineAreaChart = lineAreaChart;

}

<div class="card">
 <div class="card-header pb-0">
  <h3>Basic Area Chart </h3>
</div>
 <div class="card-body">
  <div id="basic-apex">
    <apx-chart [chart]="turnover.chart" [series]="turnover.series"
  [colors]="turnover.colors"
  [dataLabels]="turnover.dataLabels" [xaxis]="turnover.xaxis" [yaxis]="turnover.yaxis"
  [stroke]="turnover.stroke"
  [labels]="turnover.labels" [legend]="turnover.legend">
   </apx-chart>
  </div>
 </div>
</div>

let primary = localStorage.getItem('--theme-default') || '#33BFBF';
let secondary = localStorage.getItem('--theme-secondary') || '#ff6150';

export const basicAreaChart : ChartOptions | any = {
  chart: {
      height: 350,
      type: 'area',
      zoom: {
          enabled: false
      },
      toolbar: {
          show: false
      }
  },
  dataLabels: {
      enabled: false
  },
  stroke: {
      curve: 'straight'
  },
  series: [{
      name: "STOCK ABC",
      data: seriesData.monthDataSeries1.prices
  }],
  title: {
      text: 'Fundamental Analysis of Stocks',
      align: 'left'
  },
  subtitle: {
      text: 'Price Movements',
      align: 'left'
  },
  labels: seriesData.monthDataSeries1.dates,
  xaxis: {
      type: 'datetime',
  },
  yaxis: {
      opposite: true
  },
  legend: {
      horizontalAlign: 'left'
  },
  colors: [primary]

}

// basic area chart
import { Component } from '@angular/core';
import { basicAreaChart } from '../../../../shared/data/charts/charts/apex-chart';
import { NgApexchartsModule } from 'ng-apexcharts';

@Component({
    selector: 'app-basic-area-chart',
    templateUrl: './basic-area-chart.html',
    styleUrls: ['./basic-area-chart.scss']
    imports: [NgApexchartsModule]
})
export class BasicAreaChart {

  public basicAreaChart = basicAreaChart;

}