Pixelstrap - Admin 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') || "#d1823f";
var primary = localStorage.getItem('primary_color') || "#678f44"; 
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' },
  }
}

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


var secondary = localStorage.getItem('secondary_color') || "#d1823f";
var primary = localStorage.getItem('primary_color') || "#678f44";
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 google-chart.ts tags add

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