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

Websolutionstuff | Jul-31-2024 | Categories : VueJs

Hello, web developers! In this article, we'll see how to create a bar chart in vue 3 using vue-chartjs. Here, we'll install vue-chartjs and chart.js for dynamic bar 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 Bar Chart in Vue 3 using vue-chartjs

how_to_create_bar_chart_in_vue_3_using_vue_chart_js

 

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 bar chart.
src/App.vue

<template>
  <BarChart />
</template>

<script>
import BarChart from './components/Bar.vue'

export default {
  name: 'App',
  components: {
    BarChart
  }
}
</script>

src/components/Bar.vue

<template>
  <Bar
    :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 { 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: [
          'January',
          'February',
          'March',
          'April',
          'May',
          'June',
          'July',
          'August',
          'September',
          'October',
          'November',
          'December'
        ],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to Create Bar 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.

npm run dev

Output:

create_bar_chart_in_vue_3_using_vue_chart_js

 


You might also like:

Recommended Post
Featured Post
REST API In Laravel
REST API In Laravel

In this article, we will explore the world of RESTful APIs in the context of Laravel, encompassing versions 8, 9, and 10...

Read More

Aug-26-2020

Laravel 8 Artesaos SEOTools Tutorial
Laravel 8 Artesaos SEOTools Tu...

Hello Devs, In this tutorial we will learn how to use SEOTools in laravel 8. we will give you example of se...

Read More

Jun-07-2021

Autotab To Next Input Field JQuery
Autotab To Next Input Field JQ...

In this article, we will see how to focus on the next input when the max length is reached. Sometimes we have...

Read More

Aug-19-2020

VPS Servers - Take a Step Ahead to More Growth
VPS Servers - Take a Step Ahea...

It is the poor hosting that is causing you so many issues. If you upgrade to advanced hosting based on your website need...

Read More

Apr-08-2022