Chart.js Vue.js Tutorial

What is Chart.js

Chart.js is known for its simplicity and ease of use. It creates responsive charts out-of-the-box and will look good on most devices natively. Chart.js uses HML5 canvas elements, which is more scalable than an SVG rendering approach. it is well documented with good community support. Chart.js isn't as highly customizable as other options on the market, which can be a negative for those looking to fully customize their end experience.

What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). It was created by Evan You and is designed to be incrementally adoptable. The core library focuses on the view layer only, making it easy to pick up and integrate with other libraries or existing projects. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It has a virtual DOM for faster and more efficient manipulation, composable components, and a relatively low learning curve. It is great for ease-of-use, performance, and overall developer experience.

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!