Vue.js Basic Chart

Download Vue.js Chart Samples

Example shows basic column chart in Vuejs with category x-axis. Library also supports numeric & date-time values over x-axis.

/* 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>                              
/*main.js*/
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');

Chart Customizations

You can change the color of individual datapoint by changing color property. You can also change its width using dataPointWidth property.

Note   For step by step instructions, follow our Vuejs Integration Tutorial