Getting Started with CanvasJS Vue Chart Component

This tutorial teaches you to quickly add beautiful Charts to your Vue.js applications using CanvasJS & NPM.

In case you have any suggestions/feedback please post it in our forum.

Here are couple of things that you need to remember while using Vue.js Chart Component

1. You no longer have to call render() method during the initial render. You need to call render whenever data is updated.
2. You can get the reference of the chart instance by passing the call-back function like `@chart-ref=”chartRef”` to the component & get the instance as a callback parameter. This allows you to access all chart properties and methods including render().
3. Once you get reference to the chart object, you can update any of the options – like chart.options.data[0].type = “column” and call chart.render(). Refer Updating Chart Options / Data for more information.
4. You can also style the chart component as shown below

<CanvasJSChart :options="chartOptions" @chart-ref="chartRef" :styles="{width: '100%', height: '360px'}"/>

Step-By-Step Instruction

1. Create Vue.js App

Create Vue.js app. Please refer to Vue.js documentation for prerequisites, environment setup & tutorial on creating Vue.js project & app.

2. Install CanvasJS Vue Charts Plugin via NPM

Install CanvasJS Vue Charts package via NPM by running the following command.

npm install @canvasjs/vue-charts

3. Import CanvasJS Vue Charts plugin & register it globally

Import the Vue Charts plugin to your Vue.js application & register it globally.

import { createApp } from 'vue'
import App from './App.vue'
 
import CanvasJSChart from '@canvasjs/vue-charts';
 
const app = createApp(App);
app.use(CanvasJSChart); // install the CanvasJS Vuejs Chart Plugin
app.mount('#app');

4. Set the chart-options & create chart

Set the chart-options in app.vue & use ‘CanvasJSChart’ selector to create chart inside template tag.

<!-- App.vue -->
<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        title:{
		  text: "Vue.js Basic Column Chart"
        },
        data: [{
          type: "column",
          dataPoints: [
            { label: "apple",  y: 10 },
            { label: "orange", y: 15 },
            { label: "banana", y: 25 },
            { label: "mango",  y: 30 },
            { label: "grape",  y: 28 }
          ]
        }]
      }
    }
  }
}
</script>
<template>
	<CanvasJSChart :options="options"/>
</template>

In order to make it simpler we have also created examples with different use-cases. Please check out our Vue.js Gallery for the same.