Vue.js Stacked Column 100% Chart

Download Vue.js Chart Samples

Example shows Vuejs stacked column 100% chart with custom colors applied to dataseries and in the tooltip content.

/* App.vue */
<script>
  
  export default {
    data() {
      return {
        chart: null,
        options: {
          theme: "light2",
          title: {
            text: "Composition of Colors"
          },
          axisX: {
            labelTextAlign: "center"
          },
          toolTip: {
            shared: true
          },
          data: [{
            type: "stackedColumn100",
            name: "Red",
            color: "#C0504E",
            showInLegend: "true",
            toolTipContent: "<b>{label}</b><br>{y}% of <span style='\"'color: {color};'\"'>{name}</span>",
            dataPoints: [
              { label: "Beige", y: 96 },
              { label: "Chocolate", y: 82 },
              { label: "Cyan", y: 100 },
              { label: "Gray", y: 47 },
              { label: "Violet", y: 93 },
              { label: "Purple", y: 50 },
              { label: "Mint Cream", y: 96 },
              { label: "Lime Green", y: 20 },
            ]
          },
          {
            type: "stackedColumn100",
            name: "Green",
            color: "#77A033",
            showInLegend: "true",
            toolTipContent: "{y}% of <span style='\"'color: {color};'\"'>{name}</span>",
            dataPoints: [
              { label: "Beige", y: 96 },
              { label: "Chocolate", y: 41 },
              { label: "Cyan", y: 100 },
              { label: "Gray", y: 47 },
              { label: "Violet", y: 51 },
              { label: "Purple", y: 0 },
              { label: "Mint Cream", y: 100 },
              { label: "Lime Green", y: 80 },
            ]
          },
          {
            type: "stackedColumn100",
            name: "Blue",
            color: "#4F81BC",
            showInLegend: "true",
            toolTipContent: "{y}% of <span style='\"'color: {color};'\"'>{name}</span>",
            dataPoints: [
              { label: "Beige", y: 86 },
              { label: "Chocolate", y: 11 },
              { label: "Cyan", y: 0 },
              { label: "Gray", y: 47 },
              { label: "Violet", y: 93 },
              { label: "Purple", y: 50 },
              { label: "Mint Cream", y: 98 },
              { label: "Lime Green", y: 20 },
            ]
          }]
        },
        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

In the above example, color of dataseries is changed by setting color property & the color of content shown in tooltip is customized with the help of toolTipContent property. Some other commonly used customizations include shared tooltip, contentFormatter, etc.

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