Vue.js Waterfall Chart

Download Vue.js Chart Samples

Example shows Vuejs Waterfall chart. Waterfall charts are used to visualize financial statements, analyze sales or product value over a period of time.

/* App.vue */
<script>

  export default {
    data() {
      return {
        options: {
          theme: "light2", //"light1", "light2", "dark1", "dark2"
          animationEnabled: true,
          title:{
            text: "Income Statement"
          },
          axisX:{
            labelFontSize: 12,
            labelMaxWidth: 75,
            labelAngle: 0
          },
          axisY: {
            prefix: "$"
          },	
          data: [{
            type: "waterfall",
            yValueFormatString: "$#,##0",
            risingColor: "#42A5F5",
            fallingColor: "#EF5350",
            lineColor: "#222222",
            dataPoints: [
              { label: "Net Revenue", y: 280631 },
              { label: "Inventory", y: -115000 },
              { label: "Merchandise", y: -8900 },
              { label: "Other Sales Cost", y: -28990 },
              { label: "Gross Income", isIntermediateSum: true, color: "#55646e" },
              { label: "Staff", y: -24500 },
              { label: "Marketing", y: -5000 },
              { label: "Other Facilities", y: -35100 },
              { label: "Operating Income", isCumulativeSum: true, color: "#55646e" },
              { label: "Taxes", y: -11000 },
              { label: "Net Income", isCumulativeSum: true}
            ]
          }]
        },
        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

Colors of rising & falling columns can be customized by setting risingColor & fallingColor properties respectively. Some other commonly used customization options are fillOpacity, showInLegend, color, etc.

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