Vue.js Multi Series Range Bar Chart

Download Vue.js Chart Samples

Example shows Vuejs multi series range bar chart with legends. Legends helps in identifying each dataseries in multi-series chart.

/* App.vue */
<script>
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          exportEnabled: true,
          theme: "dark2",
          title: {
            text: "Average Temperature Comparison"
          },
          axisX: {
            valueFormatString: "MMM"
          },
          axisY: {
            title: "Temperature (°C)",
            suffix: "°C"
          }, 
          toolTip: {
            shared: true,
          },
          legend: {
            verticalAlign: "top",
            cursor:"pointer",
            itemclick : this.toggleDataSeries
          },
          data: [{
            type: "rangeBar",
            showInLegend: true,
            yValueFormatString: "#0.#°C",
            xValueFormatString: "MMM YYYY",
            name: "New Delhi",
            toolTipContent: "<b>{x}</b><br/> <span style='\"'color: {color};'\"'>{name}</span>: Min:{y[0]}, Max:{y[1]}",
            dataPoints: [
              { x: new Date(2019, 0, 1), y: [4.05551, 27.2805] },
              { x: new Date(2019, 1, 1), y: [7.04101, 27.9682] },
              { x: new Date(2019, 2, 1), y: [8.80941, 38.6481] },
              { x: new Date(2019, 3, 1), y: [14.9049, 44.027] },
              { x: new Date(2019, 4, 1), y: [21.5617, 45.3777] },
              { x: new Date(2019, 5, 1), y: [23.265, 46.1679] },
              { x: new Date(2019, 6, 1), y: [24.4436, 41.8449] },
              { x: new Date(2019, 7, 1), y: [24.605, 36.5823] },
              { x: new Date(2019, 8, 1), y: [23.2338, 39.1145] },
              { x: new Date(2019, 9, 1), y: [17.0104, 36.1847] },
              { x: new Date(2019, 10, 1), y: [12.1876, 33.7592] },
              { x: new Date(2019, 11, 1), y: [2.30859, 24.4579] }
            ]
          }, {
            type: "rangeBar",
            showInLegend: true,
            yValueFormatString: "#0.#°C",
            xValueFormatString: "MMM YYYY",
            name: "Hyderabad",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: Min:{y[0]}, Max:{y[1]}",
            dataPoints: [
              { x: new Date(2019, 0, 1), y: [9.90148, 30.2263] },
              { x: new Date(2019, 1, 1), y: [14.3742, 36.1895] },
              { x: new Date(2019, 2, 1), y: [18.8242, 38.9956] },
              { x: new Date(2019, 3, 1), y: [23.495, 40.4843] },
              { x: new Date(2019, 4, 1), y: [25.5003, 41.6375] },
              { x: new Date(2019, 5, 1), y: [23.1254, 41.0132] },
              { x: new Date(2019, 6, 1), y: [22.4706, 33.5551] },
              { x: new Date(2019, 7, 1), y: [22.0591, 32.9423] },
              { x: new Date(2019, 8, 1), y: [22.4012, 31.6411] },
              { x: new Date(2019, 9, 1), y: [21.1766, 31.318] },
              { x: new Date(2019, 10, 1), y: [16.8637, 30.9155] },
              { x: new Date(2019, 11, 1), y: [15.8416, 29.1585] }
            ]
          }]
        },
        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" :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

You can also enable legend for dataseries by setting showInLegend to true. legendText property can be used to customize the text shown in the legend. Other commonly used customization options include shared tooltip, color, etc.

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