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
<CanvasJSChart :options="chartOptions" @chart-ref="chartRef" :styles="{width: '100%', height: '360px'}"/>
Download CanvasJS Chart – it includes Vue.js component.
Create Vue.js app. Please refer to Vue.js documentationfor prerequisites, environment setup & tutorial on creating Vue.js project & app.
Save canvasjs.min.js & CanvasJSVueJSComponent.vue files in the assets folder of the app (src or src/assets or src/lib).
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.
Server Side Technologies |
Front End Technologies |
Contact |
|
---|---|---|---|
ASP.NET MVC Charts | JavaScript Charts | FAQs | |
PHP Charts | jQuery Charts | Sales Enquiries | |
Spring MVC Charts | React Charts | Support Forum | |
JSP Charts | Angular Charts | Careers | |
JavaScript StockCharts | |||
Privacy Policy © fenopix