Vue.js Area Chart with Category Axis

Download Vue.js Chart Samples

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

/* App.vue */
<script>
  
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          theme: "light2",
          title:{
            text: "Spain Government Debt"
          },
          axisY: {
            title: "Amount in Euros",
            prefix: "€",
            labelFormatter: function addSymbols(e) {
              var suffixes = ["", "K", "M", "B", "T"];
              var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
              if(order > suffixes.length - 1)
                order = suffixes.length - 1;

              var suffix = suffixes[order];
              return CanvasJS.formatNumber(e.value / Math.pow(1000, order), "#,##0.##") + suffix;
            }
          },
          toolTip: {
            contentFormatter: function(e) {
              let content = "", suffixes = ["", "K", "M", "B", "T"];
              for(let i=0; i<e.entries.length; i++) {
                let yVal = e.entries[i].dataPoint.y, order = Math.max(Math.floor(Math.log(yVal) / Math.log(1000)), 0);
                if(order > suffixes.length - 1)
                  order = suffixes.length - 1;

                let suffix = suffixes[order];
                content += "<span>" +e.entries[i].dataPoint.label + "</span> : €" + CanvasJS.formatNumber(yVal / Math.pow(1000, order), "#,##0.##") + suffix;
              }
              return content;
            }
          },
          data: [{
            type: "area",
            name: "Spain",
            dataPoints: [
              { label: "2013", y: 977312000000 },
              { label: "2014", y: 1039388000000 },
              { label: "2015", y: 1070080000000 },
              { label: "2016", y: 1104554000000 },
              { label: "2017", y: 1145097000000 },
              { label: "2018", y: 1173348000000 },
              { label: "2019", y: 1188862000000 }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    }
  }
</script>
  
<template>
    <CanvasJSChart :options="options" :style="styleOptions" />
</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 customize the value type to be accepted for x-axis using xValueType property. You can pass label instead of x in datapoint to show x-axis as category axis.

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