export var barChart2 = {
    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/component/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 barChart2 = chartData.barChart2

}

     // RadarGraph Chart
     export var radarGraphOptions: ChartJSOptions<'radar'> = {
      responsive: true,
      maintainAspectRatio: false,
      elements: {
        line: {
          borderWidth: 2,
        },
      },
    };
    export var radarGraphLabels: string[] = ['Ford', 'Chevy', 'Toyota', 'Honda', 'Mazda'];
    export var radarGraphType: ChartType = 'radar';
    export var radarGraphLegend = false;
    export var radarGraphData: ChartDataset<'radar'>[] = [
      {
        label: 'My First dataset',
        fill: true,
        backgroundColor: 'rgba(92, 95, 206, 0.4)',
        borderColor: primary,
        pointBackgroundColor: primary,
        pointBorderColor: primary,
        pointHoverBackgroundColor: primary,
        pointHoverBorderColor: 'rgba(255, 206, 0, 0.4)',
        data: [12, 3, 5, 18, 7],
      },
    ];
    

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

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

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">
        <h4>Line chart with area</h4>
    </div>
    <div class="card-body">
        <div class="ct-4 flot-chart-container">
            <x-chartist [configuration]="chart5"></x-chartist>
        </div>
    </div>
</div>

import { BarChartConfiguration, LineChartConfiguration, PieChartConfiguration } from 'ng-chartist';


export var chart5 : LineChartConfiguration = {
    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,
    }
};

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

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

export class LineChartWithArea {

   public chart5 = chart5;

}

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

<div class="card">
    <div class="card-header">
        <h4>Basic Area Chart </h4>
    </div>
    <div class="card-body">
        <div id="basic-apex">
            <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>
        </div>
    </div>
</div>

                    
import { BasicChart } from '../../../interface/charts/apex-charts';
var primary = localStorage.getItem('primary_color') || '#7A70BA';
var secondary = localStorage.getItem('secondary_color') || '#48A3D7';

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

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

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

export class BasicAreaChart {

   public basicAreaChart = basicAreaChart;

}