Vue.js Stacked Column 100% Chart with Indexlabels

Download Vue.js Chart Samples

Example shows Vuejs stacked column 100% chart with index / data labels shown for each datapoint.

/* App.vue */
<script>

  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          theme: "light2",
          title:{
            text: "Users by Country and Age Breakdown"
          },
          axisY:{
            suffix: "%"
          },
          axisX: {
            labelAngle: 0,
            labelTextAlign: "center"
          },
          toolTip: {
            shared: true
          },
          data: [{
            type: "stackedColumn100",
            name: "18-24",
            showInLegend: true,
            indexLabel: "#percent%",
            indexLabelFontColor: "#fff",
            color: "#1565C0",
            toolTipContent: "{label} <br/> <span style='\"'color: {color};'\"'>{name}</span> <strong>{y} (#percent%)</strong>",
            dataPoints: [
              { label: "United States of America", y: 15426 },
              { label: "Germany", y: 2540 },
              { label: "Canada", y: 1058 },
              { label: "United Kingdom", y: 3500 },
              { label: "India", y: 10546 },
              { label: "China", y: 9580 }
            ]
          },
          {
            type: "stackedColumn100",
            name: "25-34",
            showInLegend: true,
            indexLabel: "#percent%",
            indexLabelFontColor: "#fff",
            color: "#2196F3",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span> <strong>{y} (#percent%)</strong>",
            dataPoints: [
              { label: "United States of America", y: 17486 },
              { label: "Germany", y: 2680 },
              { label: "Canada", y: 1350 },
              { label: "United Kingdom", y: 3870 },
              { label: "India", y: 14546 },
              { label: "China", y: 9790 }
            ]
          },
          {
            type: "stackedColumn100",
            name: "35+",
            showInLegend: true,
            indexLabel: "#percent%",
            indexLabelFontColor: "#fff",
            color: "#64B5F6",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span> <strong>{y} (#percent%)</strong>",
            dataPoints: [
              { label: "United States of America", y: 12687 },
              { label: "Germany", y: 2050 },
              { label: "Canada", y: 950 },
              { label: "United Kingdom", y: 3240 },
              { label: "India", y: 9546 },
              { label: "China", y: 8750 }
            ]
          }]
        },
        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

indexLabelPlacement property lets you change the placement of the Index / Data Labels. You can also customize their font size and font color using indexLabelFontSize and indexLabelFontColor.

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