Vue.js Spline Area Chart

Download Vue.js Chart Samples

Example shows Vuejs spline area chart with formatted y-axis labels.

/* App.vue */
<script>
  import * as CanvasJS from '@canvasjs/charts';

  export default {
    data() {
      return {
        options: {
          theme: "light2",
          animationEnabled: true,
          exportEnabled: true,
          title: {
            text: "Annual Consumption of Electricity"
          },
          axisY: {
            title: "Consumption (KilowattHour)",
            labelFormatter: function(e) {
              return (e.value / 1000000000000) + "T"
            }
          },
          toolTip: {
            shared: true,
            contentFormatter: function(e) {
              return "<span style='color:" + e.entries[0].dataSeries.color + ";'>" + e.entries[0].dataPoint.label + "</span>: " + CanvasJS.formatNumber(e.entries[0].dataPoint.y / 1000000000000, "#.#0") + "T KilowattHour";
            }
          },
          data: [{
            type: "splineArea",
            color: "#7986CB",
            dataPoints: [
              { label: "2009", y: 3644702000000 },
              { label: "2010", y: 3788321000000 },
              { label: "2011", y: 3779423000000 },
              { label: "2012", y: 3726774000000 },
              { label: "2013", y: 3767564000000 },
              { label: "2014", y: 3788954000000 },
              { label: "2015", y: 3780836000000 },
              { label: "2016", y: 3807711000000 },
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    }
  }
</script>
<template>
  <CanvasJSChart :options="options" :styles="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

In the above demo, y-axis labels are formatted using labelFormatter. You can customize the filled region in area charts using color & fillOpacity properties.

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