Pixelstrap - Admin Document

Charts

Google charts Offical link Preview link

npm i vue-google-charts

Inside Your template tags add


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

Inside Your script tags add

 
import { GChart } from "vue-google-charts";
import { areaChart1 } from "@/core/data/charts/googleChart";

Inside Your google-chart.ts tags add


let secondary = localStorage.getItem('secondary_color') || "#345463";
let primary = localStorage.getItem('primary_color') || "#96a65e"; 
export 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: [primary, secondary],
  },
};

Chartist charts Offical link Preview link

npm i vue-chartist

Inside Your template tags add

<chartist
class="ct-4 flot-chart-container" ratio="" type="Line" :data="chart5.data" :options="chart5.options">
<chartist>

In your main.ts file all the following code:

import vueChartist from "vue-chartist";
.use(vueChartist)

Inside Your script tags add

 import { chart5 } from "@/core/data/chartist-chart"

Inside Your chartist-chart.ts tags add


let secondary = localStorage.getItem('secondary_color') || "#345463";
let primary = localStorage.getItem('primary_color') || "#96a65e"; 
export const chart5 = {
data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8],
    series: [
        [5, 9, 7, 8, 5, 3, 5, 4]
    ]
},
options: {
    low: 0,
    showArea: true,
},
}

Apex charts Offical link Preview link

npm i vue3-apexcharts

In your main.ts file all the following code:

import VueApexCharts from "vue3-apexcharts";
.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/charts"

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 charts.ts tags add

import { monthDataSeries } from "@/core/data/chart-data"
let secondary = localStorage.getItem('secondary_color') || "#345463";
let primary = localStorage.getItem('primary_color') || "#96a65e"; 
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],
}