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
<CanvasJSChart :options="chartOptions" @chart-ref="chartRef" :styles="{width: '100%', height: '360px'}"/>
Create Vue.js app. Please refer to Vue.js documentation for prerequisites, environment setup & tutorial on creating Vue.js project & app.
Install CanvasJS Vue Charts package via NPM by running the following command.
npm install @canvasjs/vue-charts
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');
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.