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' },
}
}Chartjs charts Offical link Preview link
npm i vue-chartistInside Your template tags add
<chartist
class="ct-6 flot-chart-container"
ratio=""
type="Pie"
:data="chart8.data"
:options="chart8.options"
:event-handlers="chart8.eventHandlers">
<chartist> In your main.ts file all the following code:
import vueChartist from "vue-chartist";
.use(vueChartist)Inside Your script tags add
import { chart8 } from "@/core/data/chartist-chart"
Inside Your chartist-chart.ts tags add
var secondary = localStorage.getItem('secondary_color') || '#FF6150';
var primary = localStorage.getItem('primary_color') || '#35bfbf';
export const chart8 = {
data: {
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
]
},
options: {
low: 0,
showArea: false, fullWidth: true,
},
eventHandlers: [{
event: 'draw',
fn(data: any) {
seq++;
if (data.type === 'line') {
data.element.animate({
opacity: {
begin: seq * delays + 1000,
dur: durations,
from: 0,
to: 1
}
});
} else if (data.type === 'label' && data.axis === 'x') {
data.element.animate({
y: {
begin: seq * delays,
dur: durations,
from: data.y + 100,
to: data.y, easing: 'easeOutQuart'
}
});
} else if (data.type === 'label' && data.axis === 'y') {
data.element.animate({
x: {
begin: seq * delays,
dur: durations,
from: data.x - 100,
to: data.x, easing: 'easeOutQuart'
}
});
} else if (data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x, easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x, easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0, to: 1, easing: 'easeOutQuart'
}
});
} else if (data.type === 'grid') {
var pos1Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '1'] - 30,
to: data[data.axis.units.pos + '1'], easing: 'easeOutQuart'
};
var pos2Animation = {
begin: seq * delays,
dur: durations,
from: data[data.axis.units.pos + '2'] - 100,
to: data[data.axis.units.pos + '2'], easing: 'easeOutQuart'
};
var animations: any = {};
animations[data.axis.units.pos + '1'] = pos1Animation;
animations[data.axis.units.pos + '2'] = pos2Animation;
animations['opacity'] = {
begin: seq * delays,
dur: durations,
from: 0, to: 1, easing: 'easeOutQuart'
};
data.element.animate(animations);
}
}
}]
}Apex charts Offical link Preview link
npm i vue3-apexchartsIn 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 } 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') || "#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],
}