Vue Js 3 Vue-chart 5 Line Chart Component Tutorial

In this extensive tutorial, we will show you how to create Line chart component in Vue 3 application using the vue-charts and Chart js packages.

A line chart, also known as a line graph, It is a useful data visualization tool that helps showing data points as specific markers connected by straight lines.

It is widely used to display the trends and patterns of data over a period of time or across a continuous range of values.

In order to implement line chart in Vue, we are going to use vue-chartjs and chart js.

Vue Chart.js is a popular integration of Chart.js, a JavaScript library, with Vue.js, a profound framework for creating chart component in relation to user interfaces.

Whereas, Chart.js is a dynamic as well as intuitive library for creating interactive and visually appealing charts, including line charts, bar charts, pie charts, and many more.

How to Create Line Chart in Vue 3 using Vue-chart 5

• Step 1: Install Vue CLI
• Step 2: Create Vue 3 Application
• Step 2: Add Bootstrap CDN
• Step 3: Install Vue Chart Js Module
• Step 4: Formulate Chart Component
• Step 5: Create Line Chart Component
• Step 6: View App on Browser

Install Vue CLI

Vue CLI is a primary tool in Vue development. Run the below command to globally install the Vue CLI on your system.

npm install -g @vue/cli

Create Vue 3 Application

Once the Vue CLI is installed; Go ahead and install the Vue application using the below command:

vue create vue-demo-app

Select the Vue 3 from the Vue CLI option list.

? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
  Manually select features 

Navigate toe the project folder.

cd vue-demo-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'

Add the following code in 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

Fix multi-word error warning by adding the following code to the vue.config.js file.

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

Add Bootstrap CDN

Open the public/index.html file, in this file you have to add the bootstrap CDN URL within the head section.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />

Install Vue Chart Js Module

Here is how you can install the Vue charts and Charts js libraries in your Vue project.

npm install vue-chartjs chart.js

Formulate Chart Component

Next, navigate to the components/ folder, then create a VueBarChart.vue file with the following code.

<template>
    <div class="container mt-5">
         
    </div>
</template>
   
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

After creating the template, you have to add the component in the App.vue file.

<template>
   <VueBarChart />
</template>
<script>
import VueBarChart from './components/VueBarChart.vue'
export default {
  name: 'App',
  components: {
    VueBarChart
  }
}
</script>

Build Line Chart Component

You have to import the essential services from vue-chartjs and chart.js packages.

Once its done define the data that has to be displayed on the line chart.

Add code in src/components/VueChartComp.vue file:

<template>
    <div class="container mt-5">
        <h2 class="mb-4 text-center">Vue 3 Vuechart Js 5 Line Chart Example</h2>
        <Line id="my-chart-id" :options="chartOptions" :data="chartData" />
    </div>
</template>
  
<script>
import { Line } from 'vue-chartjs'
import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
} from 'chart.js'
ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend
)

export default {
    name: 'LineChart',
    components: { Line },
    data() {
        return {
            chartData: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [
                    {
                        label: 'Data One',
                        backgroundColor: '#f87979',
                        data: [40, 39, 10, 40, 39, 80, 40]
                    }
                ]
            },
            chartOptions: {
                responsive: true
            }
        }
    }
}
</script>

View App on Browser

Navigate to the command-prompt, type the command and then hit enter and run the development server:

npm run serve

Once the development server is up and running, It will compile your app and provides you a development URL:

http://localhost:8080

Conclusion

Line charts are effective for showing the data on the graphical chart along with a clear progression, such as changes in numerical values over a specific period.

In this tutorial, we have learned how to use vue-charts library to easily integrate line chart in Vue js template from scratch.

I truly believe, this guide will surely help you.