Create Charts in Vue.js with Chart.js & vue-chartjs

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

Vue CLI

To Continue with this tutorial, you should have installed Vue CLI in your pc. If you are still not installed Vue.js CLI in your machine you can install it by running below command.

npm install -g @vue/cli

Create new Vue project

Now you should need to create a new Vue project by running below command.

vue create vue-chart-js-app

After running this command CLI starts to create your project and it asks following questions.

# ? Please pick a preset: Manually select features
# ? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
# ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
# ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
# ? Pick a linter / formatter config: Basic
# ? Pick additional lint features: Lint on save
# ? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
# ? Save this as a preset for future projects? (y/N) No

After the project creation, get inside the project by running following command.

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.

# npm
npm install vue-chartjs chart.js --save

# yarn
yarn add vue-chartjs chart.js

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,

Line

Bar

Doughnut

Pie

Radar

Polar Area

Bubble

Scatter

Creating & Setting Up Charts Components

Create the given below components inside the src/views folder:

Line.vue => (Home.vue)

Bar.vue

Doughnut.vue

Pie.vue

Radar.

PolarArea.vue

Bubble.vue

Scatter.vue

Creating & Setting Up Charts Views

Create the given below views src/components folder:

LineChart.vue

BarChart.vue

DoughnutChart.vue

PieChart.vue

RadarChart.vue

PolarAreaChart.vue

BubbleChart.vue

ScatterChart.vue

Now we have all finish with our components and views.

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.

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

Open src/App.vue and replace the current code with the given blow code.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Line</router-link> 
      <router-link to="/bar">Bar</router-link> 
      <router-link to="/doughnut">Doughnut</router-link> 
      <router-link to="/pie">Pie</router-link> 
      <router-link to="/radar">Radar</router-link> 
      <router-link to="/polar-area">Polar Area</router-link> 
      <router-link to="/bubble">Bubble</router-link> 
      <router-link to="/scatter">Scatter</router-link>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-12">
          <router-view />
        </div>
      </div>
    </div>

  </div>
</template>

<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  #nav {
    padding: 30px 30px 60px;

    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
</style>

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.

<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>

Go to views/Home.vue. and place the following code.

<template>
  <div>
    <h3>Line Chart Example in Vue</h3>
    <line-chart></line-chart>
  </div>
</template>

<script>
import LineChart from '@/components/LineChart'

export default {
  components: {
    LineChart
  }
}
</script>

Bar Chart Example

Go to components/BarChart.vue and place the following code.

<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>

Go to views/Bar.vue and place the following code.

<template>
  <div>
    <h3>Bar Chart Example in Vue</h3>
    <bar-chart></bar-chart>
  </div>
</template>

<script>
import BarChart from '@/components/BarChart'

export default {
  components: {
    BarChart
  }
}
</script>

Doughnut Chart Example

Go to components/DoughnutChart.vue and place the following code.

<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>

Go to views/Doughnut.vue and place the following code.

<template>
  <div>
    <h3>Doughnut Chart Example in Vue</h3>
    <doughnut-chart></doughnut-chart>
  </div>
</template>

<script>
import DoughnutChart from '@/components/DoughnutChart'

export default {
  components: {
    DoughnutChart
  }
}
</script>

Pie Chart Example

Go to components/PieChart.vue and place the following code.

<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>

Go to views/Pie.vue and place the following code.

<template>
  <div>
    <h3>Pie Chart Example in Vue</h3>
    <pie-chart></pie-chart>
  </div>
</template>

<script>
import PieChart from '@/components/PieChart'

export default {
  components: {
    PieChart
  }
}
</script>

Radar Chart Example

Go to components/RadarChart.vue and place the following code.

<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>

Go to views/Radar.vue and place the following code.

<template>
  <div>
    <h3>Radar Chart Example in Vue</h3>
    <radar-chart></radar-chart>
  </div>
</template>

<script>
import RadarChart from '@/components/RadarChart'

export default {
  components: {
    RadarChart
  }
}
</script>>

Polar Area Chart Example

Go to components/PolarAreaChart.vue and place the following code.

<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>

Go to views/PolarArea.vue and place the following code.

<template>
  <div>
    <h3>Polar Area Chart Example in Vue</h3>
    <polar-area-chart></polar-area-chart>
  </div>
</template>

<script>
import PolarAreaChart from '@/components/PolarAreaChart'

export default {
  components: {
    PolarAreaChart
  }
}
</script>

Bubble Chart Example

Go to components/BubbleChart.vue and place the following code.

<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>

Go to views/Bubble.vue and place the following code.

<template>
  <div>
    <h3>Bubble Chart Example in Vue</h3>
    <bubble-chart></bubble-chart>
  </div>
</template>

<script>
import BubbleChart from '@/components/BubbleChart'

export default {
  components: {
    BubbleChart
  }
}
</script>

Scatter Chart Example

Go to components/ScatterChart.vue and place the following code.

<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>

Go to views/Scatter.vueand place the following code.

<template>
  <div>
    <h3>Scatter Chart Example in Vue</h3>
    <scatter-chart></scatter-chart>
  </div>
</template>

<script>
import ScatterChart from '@/components/ScatterChart'

export default {
  components: {
    ScatterChart
  }
}
</script>

Wrap Up

Now, we have finished with our coding part. To check your project in the browser run below command

npm run serve

You can download the source code of this tutorial from this GitHub repository.