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 * as chartData from '../../../../shared/data/charts/google-chart';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
import { CommonModule } from '@angular/common';

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

  public barChart2 = chartData.barChart2;

}

 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,
    

};
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",
        //   fill: true,
        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/chartsjs';
import { BaseChartDirective } from 'ng2-charts';

@Component({
    selector: 'app-radar-graph',
    templateUrl: './radar-graph.html',
    styleUrls: ['./radar-graph.scss'],
    imports: [BaseChartDirective]
})
export class RadarGraph {

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

}

<!-- Html code for display apex chart -->
  <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';
import { ChartEvent } from 'ng-chartist';

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

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

export var chart5: 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,
        height: 250,
        colors: [primary_color, secondary_color]
    }
};

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

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

  public chart5 = chartData.chart5;

}

<!-- Html code for display apex chart -->

<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_color = localStorage.getItem('primary_color') || '#35bfbf';
let secondary_color = localStorage.getItem('secondary_color') || '#FF6150';

export let splineArea1: ChartOptions | any = {
    series: [
        {
            name: "STOCK ABC",
            data: [9600.00 ,9300.00 ,9000.00 ,8700.00 ,8400.00 ,8100.00,7800.00],
        }
    ],
    colors: [primary_color],
    chart: {
        type: "area",
        height: 350,
        toolbar: {
            show: false
        },
        zoom: {
            enabled: false
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        curve: "straight"
    },
    labels: ["4 Nov","21 Nov","28 Nov"],
    xaxis: {
        type: "datetime"
    },
    yaxis: {
        opposite: true
    },
    legend: {
        horizontalAlign: "left"
    }
};

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

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

  public chart5 = chartData.chart5;

}