How to Create Awesome Charts in Vue 2 with Chart.js

Last Updated on by in Vue JS
This tutorial explains, how to create various charts component in Vue js using the Awesome charts. We will learn how to build charts components using Vue components.Data visualization plays pivotal role in business decision making. Charts offer dynamic, and intuitive way to decipher the language of heavy data.

Charts process our brains to understand the data more easily and quickly than the textual information.

The most critical information can be easily scanned with the help of Charts, which is not possible in a textual form of data.

Vue.js is a lenient JavaScript framework to create useful user-interfaces. We will take the help of Chart.js and vue-chartjs to build the chart examples.

So, Let’s get started.

Table of Contents

  1. Install Vue Project with Vue CLI
  2. Install Chart.js and vue-chartjs Plugins
  3. Creating & Setting Up Charts Components
  4. Create & Set up Routes in Vue
  5. Vue Line Chart Example
  6. Bar Chart Example in Vue
  7. Vue Doughnut Chart Example
  8. Pie Chart Example in Vue
  9. Radar Chart Example
  10. Polar Area Chart Example
  11. Bubble Chart Example
  12. Scatter Chart Example
  13. Summary

Install Vue Project with Vue CLI

First, we have to install the Vue CLI using given below command:

npm install -g @vue/cli

Next, we can install the Vue project:

vue create vue-chart-js-app

Get inside the project:

cd vue-chart-js-app

Node.js Gatsby error – “digital envelope routines::unsupported …”

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 above error for invoking the app, make sure to update the "scripts": [] array in 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 multi-word error warning, add the following code in vue.config.js file.

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

Install Chart.js and vue-chartjs Plugins

Run the command to install vue-chartjs and Chart.js plugins.

npm install vue-chartjs@^4.0.0 chart.js@^3.8.0

Chart.js is a powerful, straightforward, yet flexible open-source JavaScript library for software developers. It helps in creating various stunning charts using HTML5 canvas. It is a well-known library, and you can figure out the popularity of this library by seeing more than 48.1k+ stars on GitHub.

You 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 allows creating reusable chart components to display useful information that can be easily understood graphically.

Creating & Setting Up Charts Components

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

Next, create the given below src/components folder:

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

Create & Set up Routes in Vue

First, you have to install the vue router package.

npm add vue-router@^3.1.6

Now, 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.

Open router/index.js file and replace the existing code with the following code.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
  const routes = [
  {
    path: '/',
    name: 'LineChart',
    component: () => import('../components/LineChart.vue')
  },
  {
    path: '/bar',
    name: 'Bar',
    component: () => import('../components/BarChart.vue')
  },
  {
    path: '/doughnut',
    name: 'Doughnut',
    component: () => import('../components/DoughnutChart.vue')
  },
  {
    path: '/pie',
    name: 'Pie',
    component: () => import('../components/PieChart.vue')
  },
  {
    path: '/radar',
    name: 'Radar',
    component: () => import('../components/RadarChart.vue')
  },
  {
    path: '/polar-area',
    name: 'PolarArea',
    component: () => import('../components/PolarAreaChart.vue')
  },
  {
    path: '/bubble',
    name: 'Bubble',
    component: () => import('../components/BubbleChart.vue')
  },
  {
    path: '/scatter',
    name: 'Scatter',
    component: () => import('../components/ScatterChart.vue')
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Now, you need to import and register the router in the main.js file.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

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>

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.

Vue Line Chart Example

Now, we will create a line chart as well as display the data in Vue component using Line chart API.

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

<template>
  <LineChartGenerator :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId"
    :dataset-id-key="datasetIdKey" :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { Line as LineChartGenerator } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
)

export default {
  name: 'LineChart',
  components: {
    LineChartGenerator
  },
  props: {
    chartId: {
      type: String,
      default: 'line-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  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
          }
        ]
      },
      chartOptions: {
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false

      }
    }
  }
}
</script>

Line Chart Example in Vue

Bar Chart Example in Vue

To create a Bar chart, open components/BarChart.vue file and place the following code.

<template>
  <Bar :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { Bar } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: {
    Bar
  },
  props: {
    chartId: {
      type: String,
      default: 'bar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  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]
        }]
      },
      legend: {
        display: true
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Bar Chart Example in Vue

Vue Doughnut Chart Example

To create a Doughnut chart, open components/DoughnutChart.vue file and add the following code.

<template>
  <Doughnut :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { Doughnut } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

export default {
  name: 'DoughnutChart',
  components: {
    Doughnut
  },
  props: {
    chartId: {
      type: String,
      default: 'doughnut-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    }
  },
  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]
        }]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Vue Doughnut Chart Example

Pie Chart Example in Vue

To create a Pie chart, open components/PieChart.vue file and add the following code.

<template>
  <Pie :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { Pie } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)

export default {
  name: 'PieChart',
  components: {
    Pie
  },
  props: {
    chartId: {
      type: String,
      default: 'pie-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    }
  },
  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]
        }]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Pie Chart Example in Vue

Radar Chart Example

To create a Radar chart, open components/RadarChart.vue file and add the following code.

<template>
  <Radar :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { Radar } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  PointElement,
  LineElement,
  RadialLinearScale
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  PointElement,
  RadialLinearScale,
  LineElement
)

export default {
  name: 'RadarChart',
  components: {
    Radar
  },
  props: {
    chartId: {
      type: String,
      default: 'radar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  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
            ]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Radar Chart Example

Polar Area Chart Example

To create a Polar Area chart, open components/PolarAreaChart.vue file and add the following code.

<template>
  <PolarArea :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { PolarArea } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  RadialLinearScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale)

export default {
  name: 'PolarAreaChart',
  components: {
    PolarArea
  },
  props: {
    chartId: {
      type: String,
      default: 'polar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  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]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Polar Area Chart Example

Bubble Chart Example

In this step we will create Bubble Area chart, so open the components/BubbleChart.vue file and add the given below code.

<template>
  <Bubble :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { Bubble } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  PointElement,
  LinearScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)

export default {
  name: 'BubbleChart',
  components: {
    Bubble
  },
  props: {
    chartId: {
      type: String,
      default: 'bubble-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  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
          }
          ]
        }]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Bubble Chart Example

Scatter Chart Example

In this step we will create Bubble Area chart, so open the components/ScatterChart.vue file and add the given below code.

<template>
  <Scatter :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :plugins="plugins" :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>

<script>
import { Scatter } from 'vue-chartjs/legacy'

import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  PointElement,
  LinearScale
} from 'chart.js'

ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  PointElement,
  LinearScale
)

export default {
  name: 'ScatterChart',
  components: {
    Scatter
  },
  props: {
    chartId: {
      type: String,
      default: 'scatter-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  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
          }
          ]
        }]
      },
      chartOptions: {
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Scatter Chart Example

Summary

Finally, we have completed the Vue Charts tutorial. In this tutorial, we learned how to create various charts and display the data in a useful manner. I also walked you through with Vue wrappers for Chart js.

I hope you must have understood how to create eye-catching and stunning charts in Vue.js.