Vue.js Column Chart in Dark Theme

Download Vue.js Chart Samples

Example shows Vuejs column chart in dark theme & hidden axis-line, grids, ticks.

/* App.vue */
<script>
export default {
  data() {
    return {
      chart: null,
      options: {
        animationEnabled: true,
        exportEnabled: true,
        theme: "dark2",
        title:{
          text: "SOCIAL MEDIA USERS OVER TIME",
          fontColor: "#FF6F00",
          fontWeight: "bold"
        },
        subtitles: [{
          text: "NUMBER OF SOCIAL MEDIA USERS (IN MILLIONS) AND YEAR-ON-YEAR CHANGE"
        }],
        axisX: {
          lineThickness: 0,
          tickLength: 0,
          labelTextAlign: "center"
        },
        axisY: {
          includeZero: true,
          lineThickness: 0,
          gridThickness: 0,
          tickLength: 0,
          maximum: 5.5,
          labelFormatter: function() {
            return "";
          }
        },
        data: [{
          type: "column",
          indexLabel: "{y}",
          color: "#FF6F00",
          yValueFormatString: "#,###.###bn",
          indexLabelOrientation: "vertical",
          dataPoints: [
            { label: "JAN 2012", y: 1.482 },
            { label: "JAN 2013", y: 1.720 },
            { label: "JAN 2014", y: 1.857 },
            { label: "JAN 2015", y: 2.078 },
            { label: "JAN 2016", y: 2.307 },
            { label: "JAN 2017", y: 2.789 },
            { label: "JAN 2018", y: 3.196 },
            { label: "JAN 2019", y: 3.461 },
            { label: "JAN 2020", y: 3.709 },
            { label: "JAN 2021", y: 4.199 },
          ]
        }]
      }
    }
  }
}
</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 axis line, grid & ticks are hidden by setting lineThickness, gridThickness & tickLength properties to 0. Also, y-axis labels are hidden using labelFormatter.

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