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.