Vue 2 Tutorial- how To Create Awesome Charts In Vue 2 With Chart.js Example

In this Vue 2 tutorial, we will get to learn how to create awesome charts in Vue.js 2 app using Chart.js and the vue-chartjs plugin for understanding and interpreting the given data in a more meaningful way.

Since we already know that data visualization is an important aspect that is done effectively with the help of different charts. With the help of these charts, we can quickly and readily understand the data than just textual information.

To implement the above-mentioned, we will take the help of Chart.js and vue-chartjs to manifest the chart examples. Vue.js is a smooth JavaScript framework to create useful user interfaces.

 

Let’s see now what we will learn in this Vue 2 guide:

Step 1- Install Vue Project With Vue CLI

Step 2- Install Chart.js And vue-chartjs Plugin

Step 3- Creating & Setting Up Charts Component

Step 4- Create & Set Up Routes In Vue

Step 5- Vue Line Chart Example

Step 6- Bar Chart Example In Vue

Step 7- Vue Doughnut Chart Example

Step 8- Pie Chart Example In Vue

Step 9- Radar Chart Example

Step 10- Polar Area Chart Example

Step 11- Bubble Chart Example

Step 12- Scatter Chart Example

Step 13- Conclusion

 

Step 1- Install Vue Project With Vue CLI

The first step is just to install the Vue CLI using the below command:

npm install -g @vue/cli

Further, we have to install the Vue project:

vue create vue-chart-js-app

 

Then, we get inside the project:

cd vue-chart-js-app

 

Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

 

To remove the above error for invoking the app, do remember to update the “scripts”: [] array in the package.json file.

"scripts": {
    "serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
},

 

Vue Multi-Word Error

To remove the multi-word error warning, we add the following code in the vue.config.js file:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
})

 

Step 2- Install Chart.js And vue-chartjs Plugins

Afterward, we have to run the given command to install vue-chartjs and Chart.js plugins:

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

It is of utmost necessity to install the Chart.js plugin since it is a straightforward, flexible open-source JavaScript library for software development.

We can draw the following charts with Chart.js:

• Line
• Bar
• Doughnut
• Pie
• Radar
• Polar Area
• Bubble
• Scatter

The vue-chartjs provides a wrapper for Chart.js in Vue. It simply allows the creation of reusable chart components to display useful information that can be easily understood graphically.

 

Step 3- creating & Setting Up Charts Components

In this step, we will create the components and views for the charts examples.

We will create the below files inside the src/views folder:

• Line.vue => (Home.vue)
• Bar.vue
• Doughnut.vue
• Pie.vue
• Radar.vue
• PolarArea.vue
• Bubble.vue
• Scatter.vue

Further, we need to create the given src/components folder:

• LineChart.vue
• BarChart.vue
• DoughnutChart.vue
• PieChart.vue
• RadarChart.vue
• PolarAreaChart.vue
• BubbleChart.vue
• Scatterchart.vue

 

Step 4- Create & Set Up Routes In Vue

We need to create and configure the routes in our Vue app. These routes will allow us to display the charts from the component we generated above.

Then, we have to open the 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

 

Afterward, we open the src/App.vue and replace the current code with the following 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;
dfhn5ygt4rfr    -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;
      }
    }v
  }
</style>

We enabled the navigation in Vue by defining the router link inside the src/App.vue file.

The <router-view /> directive will display the associated view for the particular Chart component.

 

Step 5- Vue Line Chart Example

Now, we will create a line chart. Then, we have to go to components/LineChart.vue and place the below 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", "Hafar Al-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>

Next, we open the views/Home.vue. Here, we will display the Line Chart. So, we add the line-chart tag and import the LineChart component inside the view:

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

 

Step 6- Bar Chart Example In Vue

In this step, we create a Bar Chart, we have to open the components/BarChart.vue file and place the following code in it:

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

Further, we will open the views/Bar.vue file. Here, we have to show the Bar Chart. So, add the bar-chart tag inside the template directive and import the BarChart component in the view:

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

 

Step 7- Vue Doughnut Chart Example

To create a Doughnut Chart, we will open the components/DoughnutChart.vue file and add the below 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>

Further, we open the views/Doughnut.vue file. Here, we have to show the Doughnut Chart. So, we will add the doughnut-chart tag inside the template directive and import the DoughnutChart component in the view:

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

 

Step 8- Pie Chart Example in Vue

To create a Pie Chart, we open the components/PieChart.vue file and add 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>

Next, we will open the views/Pie.vue file. Here, we have to show the Pie Chart. So, we have to add the pie-chart tag inside the template directive and import the PieChart component in the View:

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

 

Step 9- Radar Chart Example

To create a Radar Chart, we have to open the components/RadarChart.vue file and add the below 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>

Further, we open the views/Radar.vue file. Here, we have to show the Radar Chart. So, we will add the radar-chart tag inside the template directive and import the RadarChart component in the view.

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

 

Step 10- Polar Area Chart Example

To create a Polar Area Chart, we have to open the components/PolarAreaChart.vue file and add the below 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>

 

Next, we have to open the views/PolarArea.vue file. Here, we have to show the PolarArea chart. So, we will add the polar-area-chart tag inside the template directive and import the polarAreaChart component in the view:

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

Step 11- Bubble Chart Example

In this step, we will create Bubble Area Chart. So, we open the components/BubbleChart.vue file and add the below 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>

Then, we go to views/Bubble.vue file. Here, we need to display the Bubble Chart. So, we add the bubble-chart tag inside the vue’s template directive and import the BubbleChart component in the view:

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

 

Step 12- Scatter Chart Example

In this step, we will create Bubble Area Chart. So, we open the components/ScatterChart.vue file and add the given code to it:

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

then, we go to the views/Scatter.vue file. here, we need to display the Scatter chart. So, we add the scatter-chart tag inside the vue’s template directive and import the ScatterChart component in the view:

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

Then, we will start the project and check in the browser:

npm run serve

 

 

Conclusion

So, we have reached the end of this tutorial in which we have seen how to create various charts and display the data in an effective and useful manner.

Hope that you have understood the concept and its implementation thoroughly.

 

Thanks