How to Create Line Chart in Vue 3 using vue-chartjs

Websolutionstuff | Jul-26-2024 | Categories : VueJs

Hello, web developers! In this article, we'll see how to create a line chart in vue 3 using vue-chartjs. Here, we'll install vue-chartjs and chart.js for dynamic line charts in vue 3. vue-chartjs is a wrapper for Chart.js in Vue. You can easily create reusable chart components.

You can install it using the pnpm, yarn, and npm commands. It provides every chart type that is available in Chart.js is exported as a named component.

Create Line Chart in Vue 3 using vue-chartjs

create line chart in vue 3 using vue-chartjs

Step 1: Install Vue 3

In this step, we'll install vue 3 using the following command.

npm init vue@latest
cd your-project-name
npm install

Then, we'll install vue-chartjs and chart.js dependency using the following command.

npm install vue-chartjs chart.js

Step 2: Create the Necessary Files

Next, we'll create a component and import a Line chart. Also, import the line chart configuration from the chartConfig.js file.
src/App.vue

<template>
  <Line :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Line } from 'vue-chartjs'
import * as chartConfig from './chartConfig.js'

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

export default {
  name: 'App',
  components: {
    Line
  },
  data() {
    return chartConfig
  }
}
</script>

src/chartConfig.js

export const data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: [40, 39, 10, 40, 39, 80, 40]
    }
  ]
}

export const options = {
  responsive: true,
  maintainAspectRatio: false
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module" defer src="./index.ts"></script>
    <title>How to Create Line Chart in Vue 3 using vue-chartjs - Websolutionstuff</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Step 3: Run Vue 3 Application

Now, run the vue 3 application using the following command.