Chart.js Vue.js Tutorial

Chart.js Vue.js Code Example

This example demonstrates how to implement a simple line chart in a Vue.js application using the Chart.js library. We will create a Vue component that renders a canvas for our chart.

Step 1: Project Setup

First, ensure you have Vue CLI installed. If not, you can install it globally via npm:

npm install -g @vue/cli

Create a new Vue project (if you haven't already) and navigate into your project directory:

vue create chartjs-vue-example
cd chartjs-vue-example

Install Chart.js and vue-chartjs, a Vue.js wrapper for Chart.js:

npm install chart.js vue-chartjs

Step 2: Creating the Chart Component

Create a new file, LineChart.vue, in the src/components directory. This file will define our chart component. Copy and paste the following code into this new file:

<template>
 <div>
   <canvas id="myChart"></canvas>
 </div>
</template>

<script>
import { Line } from 'vue-chartjs'
import Chart from 'chart.js/auto'

export default {
 name: 'LineChart',
 components: {
   Line
 },
 props: {
   chartData: {
     type: Object,
     default: null
   },
   chartOptions: {
     type: Object,
     default: () => ({})
   }
 },
 mounted () {
   new Chart(this.$refs.canvas.getContext('2d'), {
     type: 'line',
     data: this.chartData,
     options: this.chartOptions
   });
 },
}
</script>


Step 3: Using the Component in an Application

Now, let's use the LineChart.vue component within our application. Modify the src/App.vue file to include our chart component and pass data to it:

<template>
 <div id="app">
   <LineChart :chartData="chartData" :chartOptions="chartOptions"/>
 </div>
</template>

<script>
import LineChart from './components/LineChart.vue'

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


Make sure to replace the chartData and chartOptions with your own data and configuration as needed.

Running the Project

Finally, start your Vue app with:

npm run serve

You should now see a simple line chart rendered in your Vue.js application using Chart.js!