npm install vue-google-charts

<template>
  <GChart
    :type="areaChart1.chartType"
    :data="areaChart1.dataTable"
    :options="areaChart1.options"
  />
</template>

<script setup>
import { GChart } from 'vue-google-charts'

// Define your colors
const primaryColor = '#3366CC'
const secondaryColor = '#DC3912'

const 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, ticks: [0, 300, 600, 900, 1200] },
    width: '100%',
    height: 400,
    colors: [primaryColor, secondaryColor],
  },
}
</script>

npm uninstall vue-google-charts

npm install vue-chartjs

npm install chart.js

<template>
  <Bar :data="barChart.data" :options="barChart.options" />
</template>

<script setup>
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
} from 'chart.js'
import { Bar } from 'vue-chartjs'

// Register Chart.js components
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

// Define colors
const primaryColor = '#7366FF'
const secondaryColor = '#838383'

const barChart = {
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        data: [35, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(115, 102, 255, 0.6)',
        borderColor: primaryColor,
        borderWidth: 2,
      },
      {
        label: 'My Second dataset',
        data: [28, 48, 40, 19, 86, 27, 90],
        backgroundColor: 'rgba(131, 131, 131, 0.6)',
        borderColor: secondaryColor,
        borderWidth: 2,
      },
    ],
  },
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Bar Chart Example',
      },
    },
    scales: {
      x: {
        beginAtZero: true,
        grid: {
          color: 'rgba(0, 0, 0, 0.1)',
        },
      },
      y: {
        beginAtZero: true,
        grid: {
          color: 'rgba(0, 0, 0, 0.1)',
        },
      },
    },
  },
}
</script>

npm uninstall chart.js

npm uninstall vue-chartjs

npm install apexcharts vue3-apexcharts

<template>
  <ApexChart
    type="area"
    height="350"
    :series="basicChartSeries"
    :options="basicChart"
  />
</template>

<script setup>
import VueApexCharts from 'vue3-apexcharts'

// Register component
const ApexChart = VueApexCharts

// Define your color
const primaryColor = '#7366FF'

// Sample data (replace with your own)
const seriesData = {
  monthDataSeries1: {
    prices: [8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5],
    dates: [
      '2023-01-01',
      '2023-02-01',
      '2023-03-01',
      '2023-04-01',
      '2023-05-01',
      '2023-06-01',
      '2023-07-01'
    ]
  }
}

const basicChartSeries = [
  {
    name: 'STOCK ABC',
    data: seriesData.monthDataSeries1.prices
  }
]

const basicChart = {
  chart: {
    type: 'area',
    zoom: {
      enabled: false
    },
    toolbar: {
      show: false
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'straight'
  },
  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: [primaryColor]
}
</script>

import { Component } from '@vueuse/core';
import { NgApexchartsModule } from 'vue3-apexcharts';
import {
  ApexNonAxisChartSeries,
  ApexPlotOptions,
  ApexChart,
  ApexLegend,
  ApexResponsive,
  ApexStroke
} from "vue3-apexcharts";

export type chartOptions = {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  labels: any;
  colors: any;
  legend: ApexLegend;
  plotOptions: ApexPlotOptions;
  responsive: ApexResponsive | ApexResponsive[];
  stroke: ApexStroke
};

@Component({
  selector: 'app-apex-chart',
  imports:[NgApexchartsModule],
  templateUrl: './apex-chart.component.html',
  styleUrl: './apex-chart.component.scss'
})
export class ApexChartComponent {

  public basicAreaChart: chartOptions = {
  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 ]
  };
}

npm uninstall apexcharts vue3-apexcharts