Vue.js Stacked Bar 100% Chart

Download Vue.js Chart Samples

Example shows Vuejs stacked bar 100% chart in dark theme.

/* app.vue */
<script>
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          theme: "dark2",
          title:{
            text: "User Sessions by Mobile OS"
          },
          axisY:{
            interval: 10,
            suffix: "%",
            gridThickness: 0,
            tickLength: 0
          },
          legend: {
            cursor:"pointer",
            itemclick : this.toggleDataSeries
          },
          toolTip: {
            shared: true
          },
          data: [{
            type: "stackedBar100",
            name: "Android",
            showInLegend: true,
            color: "#3BD482",
            toolTipContent: "{label}<br><span style='\"'color: {color};'\"'>{name}</span>: {y} (#percent%)",
            dataPoints: [
              { label: "2017", y: 140654 },
              { label: "2018", y: 150259 },
              { label: "2019", y: 160259 },
              { label: "2020", y: 180259 },
              { label: "2021", y: 190259 }
            ]
          },
          {
            type: "stackedBar100",
            name: "iOS",
            showInLegend: true,
            color: "#F7F7F7",
            indexLabel: "#percent%",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: {y} (#percent%)",
            dataPoints: [
              { label: "2017", y: 95412 },
              { label: "2018", y: 98421 },
              { label: "2019", y: 100213 },
              { label: "2020", y: 110421 },
              { label: "2021", y: 116451 }
            ]
          },
          {
            type: "stackedBar100",
            name: "Others",
            showInLegend: true,
            color: "#90A4AE",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: {y} (#percent%)",
            dataPoints: [
              { label: "2017", y: 10102 },
              { label: "2018", y: 10380 },
              { label: "2019", y: 10209 },
              { label: "2020", y: 10901 },
              { label: "2021", y: 11341 }
            ]
          }]
        },
        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, darker theme is used by setting theme property to dark2. Legend is enabled by setting showInLegend property to true & the text shown in legend is changed by setting name property.

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