Vue.js Bar Chart with Category Axis

Download Vue.js Chart Samples

Example shows Vuejs Bar Chart with category axis / custom labels.

/* app.vue */
<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        exportEnabled: true,
        title:{
          text: "Primary Plastic Production by Industry Section - 2015"
        },
        axisX: {
          labelTextAlign: "right"
        },
        axisY: {
          title: "in Million Tonnes per Year",
          suffix: "M"
        },
        data: [{
          type: "bar",
          yValueFormatString: "#,###M tonnes",
          dataPoints: [
            { label: "Industrial Machinery", y: 3 },
            { label: "Electrical/Electronic", y: 18 },
            { label: "Transportation", y: 27 },
            { label: "Consumer & Institutional Products", y: 42 },
            { label: "Other sectors", y: 47 },
            { label: "Textiles", y: 59 },
            { label: "Building and Construction", y: 65 },
            { label: "Packaging", y: 146 }
          ]
        }]
      }
    }
  }
}
</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

In the above example, the text within the axis label is aligned to right by setting labelTextAlign property to right. It can be aligned to left / center / right. You can define the format of value shown in label by setting valueFormatString property. At the same time, you can completely customize the axis labels using labelFormatter.

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