Vue.js Multi Series Column Chart

Download Vue.js Chart Samples

Example shows Vuejs multi-series column chart with legends.

/* App.vue */
<script>

  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          exportEnabled: true,
          theme: "light2",
          title:{
            text: "Quarterly Sales by Country"
          },
          axisY:{
            prefix: "$",
            //gridThickness: 0,
            tickLength: 0,
            suffix: "K",
            title: "Sales in USD",
            includeZero: true
          },
          legend: {
            cursor:"pointer",
            itemclick : this.toggleDataSeries
          },
          toolTip: {
            shared: true
          },
          data: [{
            type: "column",
            name: "Germany",
            showInLegend: true,
            color: "#F7C800",
            yValueFormatString: "$##,###K",
            dataPoints: [
              { label: "Q1", y: 50 },
              { label: "Q2", y: 100 },
              { label: "Q3", y: 120 },
              { label: "Q4", y: 140 }
            ]
          },
          {
            type: "column",
            name: "India",
            color: "#FF9933",
            showInLegend: true,
            yValueFormatString: "$##,###K",
            dataPoints: [
              { label: "Q1", y: 75 },
              { label: "Q2", y: 115 },
              { label: "Q3", y: 150 },
              { label: "Q4", y: 160 }
            ]
          },
          {
            type: "column",
            name: "China",
            color: "#DE2910",
            showInLegend: true,
            yValueFormatString: "$##,###K",
            dataPoints: [
              { label: "Q1", y: 110 },
              { label: "Q2", y: 120 },
              { label: "Q3", y: 160 },
              { label: "Q4", y: 170 }
            ]
          },
          {
            type: "column",
            name: "Unites States of America",
            color: "#3A396B",
            showInLegend: true,
            yValueFormatString: "$##,###K",
            dataPoints: [
              { label: "Q1", y: 140 },
              { label: "Q2", y: 150 },
              { label: "Q3", y: 170 },
              { label: "Q4", y: 180 }
            ]
          }]
        },
        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

You can show legends by setting showInLegend property to true. The text shown in the legends can be changed using legendText property. Other commonly used customization options include shared tooltip, toolTipContent, etc.

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