Vue.js Stacked Bar Chart

Download Vue.js Chart Samples

Example shows Vuejs stacked bar chart with custom colors.

/* app.vue */
<script>
  import * as CanvasJS from '@canvasjs/charts';
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          theme: "light2",
          exportEnabled: true,
          title:{
            text: "Quarterly Sales Report"
          },
          legend: {
            cursor:"pointer",
            itemclick : this.toggleDataSeries
          },
          axisY: {
            prefix: "$",
            suffix: "K"
          },
          toolTip: {
            shared: true
          },
          data: [{
            type: "stackedBar",
            name: "East",
            showInLegend: true,
            color: "#EF6C00",
            yValueFormatString: "$#,##0K",
            dataPoints: [
              { label: "Q1", y: 48 },
              { label: "Q2", y: 55 },
              { label: "Q3", y: 49 },
              { label: "Q4", y: 65 }
            ]
          },
          {
            type: "stackedBar",
            name: "West",
            showInLegend: true,
            color: "#FB8C00",
            yValueFormatString: "$#,##0K",
            dataPoints: [
              { label: "Q1", y: 60 },
              { label: "Q2", y: 70 },
              { label: "Q3", y: 53 },
              { label: "Q4", y: 70 }
            ]
          },
          {
            type: "stackedBar",
            name: "North",
            showInLegend: true,
            color: "#FFA726",
            yValueFormatString: "$#,##0K",
            dataPoints: [
              { label: "Q1", y: 45 },
              { label: "Q2", y: 60 },
              { label: "Q3", y: 61 },
              { label: "Q4", y: 50 }
            ]
          },
          {
            type: "stackedBar",
            name: "South",
            showInLegend: true,
            color: "#FFCC80",
            yValueFormatString: "$#,##0K",
            dataPoints: [
              { label: "Q1", y: 30 },
              { label: "Q2", y: 40 },
              { label: "Q3", y: 43 },
              { label: "Q4", y: 46 }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    },
    methods: {
      toggleDataSeries(e) {
        if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          e.dataSeries.visible = false;
        }
        else {
          e.dataSeries.visible = true;
        }
        e.chart.render();
      }
    }
  }
</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 example, custom colors are set to each dataseries by changing color property. Symbols & units are added to axis labels by setting prefix & suffix properties.

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