Charts
Google charts Offical link Preview link
npm i vue-google-charts>Inside Your template tags add
<GChart
class="chart-overflow"
id="AreaChart"
type="LineChart"
:data="area_chart .chartData_1"
:options="area_chart .options_1" />Inside Your script tags add
import { GChart } from "vue-google-charts";
import { area_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 area_chart = {
chartData_1: [
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
],
options_1: {
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
width: '100%',
height: 400,
colors: [primary, secondary]
},
}Chartist 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="bar"
height="350"
ref="chart"
:options="chartOptions"
:series="series">
<apexchart>Inside Your script tags add
import { series } from "@/core/data/charts"
Inside Your google-chart.ts tags add
var secondary = localStorage.getItem('secondary_color') || '#FF6150';
export const series = [
{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}
]
export const chartOptions = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: false
}
},
plotOptions: {
bar: {
horizontal: true,
}
},
dataLabels: {
enabled: false
},
series: [{
data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
}],
xaxis: {
categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan', 'United States', 'China', 'Germany'],
},
colors: [primary]
}