Vue.js Step Area Chart

Download Vue.js Chart Samples

Example shows Vuejs step area chart with custom colors.

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        options: {
          theme: "light2",
          animationEnabled: "true",
          title:{
            text: "Coastal Flood Event Occurance"
          },
          subtitles: [{
            text: "U.S.A"
          }],
          axisY: {
            title: "Event Count"
          },
          data: [{
            type: "stepArea",
            color: "#80DEEA",
            lineColor: "#00838F",
            markerColor: "#00838F",
            markerSize: 5,
            dataPoints: [
              { label:"2014", y: 106 },
              { label:"2015", y: 270 },
              { label:"2016", y: 223 },
              { label:"2017", y: 175 },
              { label:"2018", y: 321 },
              { label:"2019", y: 239 },
              { label:"2020", y: 188 },
              { label:"2021", y: 62 }
            ]
          }]
        },
        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 color of filled area by setting color property. Line & maker colors can be changed by setting lineColor & markerColor properties respectively.

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