In this tutorial, I am going to explain how to create awesome charts in Vue.js using chart.js and vue-chart.js package. When it comes to modern web applications data visualization is important becuase users can esaily undestand and figure out data using charts. You can see a complete preview of this tutorial from here.
Prerequisites
1 | npm install -g @vue/cli |
Create new Vue project
Now you should need to create a new Vue project by running below command.
1
vue create vue-chart-js-app
1 | vue create vue-chart-js-app |
After running this command CLI starts to create your project and it asks following questions.
1 | # ? Please pick a preset: Manually select features |
After the project creation, get inside the project by running following command.
1 | cd vue-chart-js-app |
Install Chart.js and vue-chartjs Plugins
Now we need to install chart.js and vue-chartjs plugins to continue with our tutorial. To install above plugins run one command from below commands.
1
2
3
4
5
# npm
npm install vue-chartjs chart.js --save
# yarn
yarn add vue-chartjs chart.js
1 | # npm |
Chart.js is a powerful, flexible open-source JavaScript library and it helps to create various stunning charts using HTML5 canvas. It contains with chart likes,
Creating & Setting Up Charts Components
Create the given below components inside the src/views folder:
Creating & Setting Up Charts Views
Create the given below views src/components folder:
Create & Set up Routes in Vue
To configure routes in our application, Open router/index.js
file and replace the existing code with the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/bar',
name: 'Bar',
component: () => import('../views/Bar.vue')
},
{
path: '/doughnut',
name: 'Doughnut',
component: () => import('../views/Doughnut.vue')
},
{
path: '/pie',
name: 'Pie',
component: () => import('../views/Pie.vue')
},
{
path: '/radar',
name: 'Radar',
component: () => import('../views/Radar.vue')
},
{
path: '/polar-area',
name: 'PolarArea',
component: () => import('../views/PolarArea.vue')
},
{
path: '/bubble',
name: 'Bubble',
component: () => import('../views/Bubble.vue')
},
{
path: '/scatter',
name: 'Scatter',
component: () => import('../views/Scatter.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
1 | import Vue from 'vue' |
Open src/App.vue
and replace the current code with the given blow code.
1 | <template> |
Now we need to enable the navigation in Vue by defining the router-link
inside the src/App.vue
.
The <router-view/
> directive will display the associated view for the particular Chart component.
Line Chart Example
Go to components/LineChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script>
import { Line } from 'vue-chartjs'
export default {
extends: Line,
data () {
return {
chartData: {
labels: ["Babol", "Cabanatuan", "Daegu", "Jerusalem", "Fairfield", "New York", "Gangtok", "Buenos Aires", "HafarAl-Batin", "Idlib"],
datasets: [
{
label: 'Line Chart',
data: [600, 1150, 342, 6050, 2522, 3241, 1259, 157, 1545, 9841],
fill: false,
borderColor: '#2554FF',
backgroundColor: '#2554FF',
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [ {
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/Home.vue.
and place the following code.
1 | <template> |
Bar Chart Example
Go to components/BarChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script>
import { Bar } from 'vue-chartjs'
export default {
extends: Bar,
data() {
return {
chartData: {
labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09",
"2015-10", "2015-11", "2015-12"
],
datasets: [{
label: 'Bar Chart',
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
pointBorderColor: '#2554FF',
data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true
}
}],
xAxes: [{
gridLines: {
display: false
}
}]
},
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/Bar.vue
and place the following code.
1 | <template> |
Doughnut Chart Example
Go to components/DoughnutChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script>
import { Doughnut } from 'vue-chartjs'
export default {
extends: Doughnut,
data () {
return {
chartData: {
labels: ["Babol", "Cabanatuan", "Daegu", "Jerusalem"],
datasets: [{
borderWidth: 1,
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
data: [1000, 500, 1500, 1000]
}]
},
options: {
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/Doughnut.vue
and place the following code.
1 | <template> |
Pie Chart Example
Go to components/PieChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script>
import { Pie } from 'vue-chartjs'
export default {
extends: Pie,
data () {
return {
chartData: {
labels: ["Italy", "India", "Japan", "USA",],
datasets: [{
borderWidth: 1,
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
],
data: [1000, 500, 1500, 1000]
}]
},
options: {
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/Pie.vue
and place the following code.
1 | <template> |
Radar Chart Example
Go to components/RadarChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script>
import { Radar } from 'vue-chartjs'
export default {
extends: Radar,
data () {
return {
chartData: {
labels: [
"Babol",
"Cabanatuan",
"Daegu",
"Jerusalem",
"Fairfield",
"New York",
"Gangtok",
"Buenos Aires",
"Hafar Al-Batin",
"Idlib"
],
datasets: [
{
label: 'Radar Chart',
borderWidth: 1,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
data: [
32127289,
24724027,
25820412,
23685667,
25644258,
22433220,
22966210,
22743184,
21880515,
21543111
]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/Radar.vue
and place the following code.
1 | <template> |
Polar Area Chart Example
Go to components/PolarAreaChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
import { PolarArea } from 'vue-chartjs'
export default {
extends: PolarArea,
data () {
return {
chartData: {
labels: ['Pink', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [
{
label: 'Polar Area Chart',
borderWidth: 1,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
data: [8, 14, 12, 7, 20]
}
]
},
options: {
responsive: true,
maintainAspectRatio: false
}
}
},
mounted () {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/PolarArea.vue
and place the following code.
1 | <template> |
Bubble Chart Example
Go to components/BubbleChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
import { Bubble } from 'vue-chartjs'
export default {
extends: Bubble,
data() {
return {
chartData: {
datasets: [{
label: 'Population Data',
borderWidth: 1,
borderColor: '#2554FF',
backgroundColor: '#2554FF',
data: [{
x: 6,
y: 3,
r: 15
}, {
x: 3,
y: 12,
r: 4
},
{
x: 5,
y: 15,
r: 10
},
{
x: 3,
y: 12,
r: 8
},
{
x: 4,
y: 5,
r: 20
},
{
x: 2,
y: 6,
r: 3
},
{
x: 4,
y: 9,
r: 11
},
{
x: 5,
y: 10,
r: 6
}
]
}]
},
options: {
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/Bubble.vue
and place the following code.
1 | <template> |
Scatter Chart Example
Go to components/ScatterChart.vue
and place the following code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<script>
import { Scatter } from 'vue-chartjs'
export default {
extends: Scatter,
data() {
return {
chartData: {
datasets: [{
label: 'Population Data',
borderWidth: 1,
borderColor: '#2554FF',
backgroundColor: '#2554FF',
data: [{
x: 6,
y: 3,
r: 15
}, {
x: 3,
y: 12,
r: 4
},
{
x: 5,
y: 15,
r: 10
},
{
x: 3,
y: 12,
r: 8
},
{
x: 4,
y: 5,
r: 20
},
{
x: 2,
y: 6,
r: 3
},
{
x: 4,
y: 9,
r: 11
},
{
x: 5,
y: 10,
r: 6
}
]
}]
},
options: {
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
mounted() {
this.renderChart(this.chartData, this.options)
}
}
</script>
1 | <script> |
Go to views/Scatter.vue
and place the following code.
1 | <template> |
Wrap Up
Now, we have finished with our coding part. To check your project in the browser run below command
1
npm run serve
1 | npm run serve |
You can download the source code of this tutorial from this GitHub repository.