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');
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.