Nuxt - Mofi Document

Charts

Google charts Offical link Preview link

npm i vue-google-charts

Inside Your template tags add

<GChart
class="chart-overflow" 
id="bar-chart2" type="BarChart"
:data="bar_chart.chartData_1"
:options="bar_chart.options_1" />

Inside Your script tags add

 import { GChart } from "vue-google-charts";
 import { bar_chart,  } from "@/core/data/google-chart"

Inside Your google-chart.ts tags add

var secondary = localStorage.getItem('secondary_color') || '#FF6150';
 var primary = localStorage.getItem('primary_color') || '#35bfbf';
 {
 export const bar_chart = {
  chartData_1: [
  ["Element", "Density", {
      role: "style"
  }],
  ["Copper", 10, "#a927f9"],
  ["Silver", 12, "#f8d62b"],
  ["Gold", 14, "#48A3D7"],
  ["Platinum", 16, "color: #7A70BA"],
],
options_1: {
  title: 'Density of Precious Metals, in g/cm^3',
  width: '100%',
  height: 400,
  bar: { groupWidth: '95%' },
  legend: { position: 'none' },
}
 }

Apex charts Offical link Preview link

npm i vue3-apexcharts

In your apexcharts.client.ts file all the following code:

import VueApexCharts from "vue3-apexcharts";
                  export default defineNuxtPlugin((nuxtApp) => {
                    nuxtApp.vueApp.use(VueApexCharts);
})

Inside Your template tags add

<apexchart
type="area" height="350"
ref="chart"
:options="chartOptions"
:series="series">
<apexchart>

Inside Your script tags add

 import { series,chartOptions } from "~/core/data/chart-data"

Inside Your chart-data.ts tags add

export const monthDataSeries = [{
                  prices: [
                      8107.85, 8128.0, 8122.9, 8165.5, 8340.7, 8423.7, 8423.5, 8514.3, 8481.85,
                      8487.7, 8506.9, 8626.2, 8668.95, 8602.3, 8607.55, 8512.9, 8496.25,
                      8600.65, 8881.1, 9340.85,
                  ],
                  dates: [
                      "13 Nov 2017",
                      "14 Nov 2017",
                      "15 Nov 2017",
                      "16 Nov 2017",
                      "17 Nov 2017",
                      "20 Nov 2017",
                      "21 Nov 2017",
                      "22 Nov 2017",
                      "23 Nov 2017",
                      "24 Nov 2017",
                      "27 Nov 2017",
                      "28 Nov 2017",
                      "29 Nov 2017",
                      "30 Nov 2017",
                      "01 Dec 2017",
                      "04 Dec 2017",
                      "05 Dec 2017",
                      "06 Dec 2017",
                      "07 Dec 2017",
                      "08 Dec 2017",
                  ],
              }]

Inside Your apex-chart.ts tags add

import { monthDataSeries } from "~/core/data/chart-data"
                  var secondary = localStorage.getItem('secondary_color') || "#48A3D7";
                  var primary = localStorage.getItem('primary_color') || "#7A70BA";
                  export const series = [
                  {
                      name: "STOCK ABC",
                      data: monthDataSeries[0].prices,
                  },
              ]
              export const chartOptions = {
                chart: {
                    height: 350,
                    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: monthDataSeries[0].dates,
                xaxis: {
                    type: "datetime",
                },
                yaxis: {
                    opposite: true,
                },
                legend: {
                    horizontalAlign: "left",
                },
                colors: [primary],
            }