Getting Started with CanvasJS Vue Chart Component

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

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. Download CanvasJS

Download CanvasJS Chart – it includes Vue.js component.

2. Create Vue.js App

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

3. Save CanvasJS Vue Component in the project

Save canvasjs.min.js & CanvasJSVueJSComponent.vue files in the assets folder of the app (src or src/assets or src/lib).

4. Import Chart Component & Create the Chart

Import the chart component & start creating the chart.

/* App.vue */
<script>
import CanvasJSChart from './assets/CanvasJSVueComponent.vue';
export default {
  components: {
	CanvasJSChart
  },
  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.