Vue.js Column Chart with Category Axis

Download Vue.js Chart Samples

Example shows Vuejs column chart with category x-axis. Library also supports numeric & date-time values over x-axis - by setting x value of datapoints.

/* App.vue */
<script>

export default {
  data() {
    return {
      options: {
        animationEnabled: true,
        title: {
          text: "TikTok User Demographics - US"
        },
        axisY: {
          includeZero: true,
          suffix: "%"
        },
        data: [{
          yValueFormatString: "#,###.##'%'",
          dataPoints: [
            {label: "10-19", y: 25 },
            {label: "20-29", y: 22.4 },
            {label: "30-39", y: 21.7 },
            {label: "40-49", y: 20.3 },
            {label: "50+", y: 11 }
          ]
        }]
      }
    }    
  }
}
</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 easily change the color of each column by setting color property or change its width using dataPointWidth. Some other customizations include indexLabel, theme, etc.

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