In this article, we will learn how to add charts in Vue.
– First of all, we have to create a Vue application.
– In vue application we have to add the below packages.
npm install primevue primeicons chart.js
– Add the below code in main.js file.
import { createApp } from 'vue'
import App from './App.vue'
import "primevue/resources/themes/lara-light-indigo/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import Chart from 'primevue/chart';
const app = createApp(App);
app.component('Chart',Chart);
app.mount('#app')
- Pie Chart
– Using the below code we can add pie chart in vue application.
<template>
<div class="card flex justify-content-center">
<Chart type="pie" :data="chartData" :options="chartOptions" class="chart1" />
</div>
</template>
<script>
export default {
data() {
return {
chartData: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [
{
label: 'Sales',
data: [550, 350, 650, 450],
backgroundColor: ['rgba(255, 159, 64, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)'],
borderColor: ['rgb(255, 159, 64)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)'],
borderWidth: 1
}
]
},
chartOptions: {
scales: {
y: {
beginAtZero: true
}
}
}
};
}
};
</script>
<style>
.chart1{
height:27rem;
width:54rem;
}
</style>
Output:-
- Doughnut Chart
– Add the below code for adding doughnut chart
<template>
<div class="card flex justify-content-center">
<Chart type="doughnut" :data="chartData" :options="chartOptions" class="chart1" />
</div>
</template>
<script>
export default {
data() {
return {
chartData: null,
chartOptions: {
cutout: '60%'
}
};
},
mounted() {
this.chartData = this.setChartData();
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.body);
return {
labels: ['A', 'B', 'C', 'D'],
datasets: [
{
data: [350, 450, 550, 650],
backgroundColor: [documentStyle.getPropertyValue('--blue-500'), documentStyle.getPropertyValue('--yellow-500'), documentStyle.getPropertyValue('--green-500'),documentStyle.getPropertyValue('--red-500')],
hoverBackgroundColor: [documentStyle.getPropertyValue('--blue-400'), documentStyle.getPropertyValue('--yellow-400'), documentStyle.getPropertyValue('--green-400'),documentStyle.getPropertyValue('--red-500')]
}
]
};
}
}
};
</script>
<style>
.chart1{
height:27rem;
width:54rem;
}
</style>
Output:-
- Bar Chart
– Using the below code we can add pie chart in vue application.
<template>
<div class="card flex justify-content-center">
<Chart type="bar" :data="chartData" :options="chartOptions" class="chart1" />
</div>
</template>
<script>
export default {
data() {
return {
chartData: null,
chartOptions: null
};
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
return {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
backgroundColor: documentStyle.getPropertyValue('--yellow-500'),
borderColor: documentStyle.getPropertyValue('--yellow-500'),
data: [10, 20, 30, 40, 50, 60, 70]
},
{
label: 'My Second dataset',
backgroundColor: documentStyle.getPropertyValue('--red-500'),
borderColor: documentStyle.getPropertyValue('--red-500'),
data: [70, 60, 50, 40, 30, 20, 10]
}
]
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
return {
maintainAspectRatio: false,
aspectRatio: 0.8,
plugins: {
legend: {
labels: {
fontColor: textColor
}
}
},
scales: {
x: {
ticks: {
color: textColorSecondary,
font: {
weight: 500
}
},
grid: {
display: false,
drawBorder: false
}
},
y: {
ticks: {
color: textColorSecondary
},
grid: {
color: surfaceBorder,
drawBorder: false
}
}
}
};
}
}
};
</script>
<style>
.chart1{
height:27rem;
width:54rem;
}
</style>
Output:-
- Polar Area
– Add the below code for adding Polar Area chart
<template>
<div class="card flex justify-content-center">
<Chart type="polarArea" :data="chartData" :options="chartOptions" class="chart1" />
</div>
</template>
<script>
export default {
data() {
return {
chartData: null,
chartOptions: null
};
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
return {
datasets: [
{
data: [30, 35, 40, 45, 50],
backgroundColor: [
documentStyle.getPropertyValue('--red-500'),
documentStyle.getPropertyValue('--green-500'),
documentStyle.getPropertyValue('--yellow-500'),
documentStyle.getPropertyValue('--bluegray-500'),
documentStyle.getPropertyValue('--blue-500')
],
label: 'My dataset'
}
],
labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
return {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
r: {
grid: {
color: surfaceBorder
}
}
}
};
}
}
};
</script>
<style>
.chart1{
height:27rem;
width:54rem;
}
</style>
Output:-
- Radar Chart
– Using the below code we can add Radar chart.
<template>
<div class="card flex justify-content-center">
<Chart type="radar" :data="chartData" :options="chartOptions" class="chart1" />
</div>
</template>
<script>
export default {
data() {
return {
chartData: null,
chartOptions: null
};
},
mounted() {
this.chartData = this.setChartData();
this.chartOptions = this.setChartOptions();
},
methods: {
setChartData() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
return {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [
{
label: 'My First dataset',
borderColor: documentStyle.getPropertyValue('--bluegray-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--bluegray-400'),
pointBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--bluegray-400'),
data: [65, 59, 90, 81, 56, 55, 40]
},
{
label: 'My Second dataset',
borderColor: documentStyle.getPropertyValue('--pink-400'),
pointBackgroundColor: documentStyle.getPropertyValue('--pink-400'),
pointBorderColor: documentStyle.getPropertyValue('--pink-400'),
pointHoverBackgroundColor: textColor,
pointHoverBorderColor: documentStyle.getPropertyValue('--pink-400'),
data: [28, 48, 40, 19, 96, 27, 100]
}
]
};
},
setChartOptions() {
const documentStyle = getComputedStyle(document.documentElement);
const textColor = documentStyle.getPropertyValue('--text-color');
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
return {
plugins: {
legend: {
labels: {
color: textColor
}
}
},
scales: {
r: {
grid: {
color: textColorSecondary
}
}
}
};
}
}
};
</script>
<style>
.chart1{
height:27rem;
width:54rem;
}
</style>
Output:-
