Vue.js Multi Series Range Column Chart

Download Vue.js Chart Samples

Example shows Vuejs multi series range column chart with shared tooltip.

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        options: {
          animationEnabled: true,
          title:{
            text: "Temperature of Berlin & Liverpool"
          },
          axisX: {
            valueFormatString: "MMM",
            interval: "1",
            intervalType: "month"
          },
          axisY: {
            title: "Temperature (°C)",
            suffix: "°C"
          },
          toolTip: {
            shared: true
          },
          legend: {
            cursor: "pointer",
            itemclick: this.toggleDataSeries
          },
          data: [{
            type: "rangeColumn",
            name: "Berlin",
            toolTipContent: "{x}<br/><span style='\"'color: {color};'\"'>{name}</span>: {y[0]}°C, {y[1]}°C",
            showInLegend: true,
            xValueFormatString: "MMM YYYY",
            dataPoints: [
              { x: new Date(2021, 0, 1), y:  [-13.5, 13.4] },
              { x: new Date(2021, 1, 1), y:  [-16.7, 19.9] },
              { x: new Date(2021, 2, 1), y:  [-5.8, 24.7] },
              { x: new Date(2021, 3, 1), y:  [-4.2, 21.2] },
              { x: new Date(2021, 4, 1), y:  [0.4, 30.7] },
              { x: new Date(2021, 5, 1), y:  [6.8, 36.6] },
              { x: new Date(2021, 6, 1), y:  [10.7, 31.2] },
              { x: new Date(2021, 7, 1), y:  [5.1, 30.5] },
              { x: new Date(2021, 8, 1), y:  [6.5, 28.1] },
              { x: new Date(2021, 9, 1), y:  [-0.7, 24.7] },
              { x: new Date(2021, 10, 1), y: [-2, 13] },
              { x: new Date(2021, 11, 1), y: [-13.3, 14.2] }
            ]
          }, {
            type: "rangeColumn",
            name: "Liverpool",
            showInLegend: true,
            xValueFormatString: "MMM YYYY",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: {y[0]}°C, {y[1]}°C",
            dataPoints: [
              { x: new Date(2021, 0, 1), y: [-5.889, 12.222] },
              { x: new Date(2021, 1, 1), y: [-5.611, 15] },
              { x: new Date(2021, 2, 1), y: [-3.5, 21] },
              { x: new Date(2021, 3, 1), y: [-4, 19] },
              { x: new Date(2021, 4, 1), y: [-1.389, 23] },
              { x: new Date(2021, 5, 1), y: [3.222, 27] },
              { x: new Date(2021, 6, 1), y: [8.722, 38] },
              { x: new Date(2021, 7, 1), y: [6.111, 24] },
              { x: new Date(2021, 8, 1), y: [4.778, 29.5] },
              { x: new Date(2021, 9, 1), y: [3, 21.778] },
              { x: new Date(2021, 10, 1), y: [-5.389, 17.111] },
              { x: new Date(2021, 11, 1), y: [-6, 15] }
            ]
          }]
        },
        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

A common tooltip can be shown for all the dataseries by setting shared property to true. Some other commonly used customization options include indexLabel, dataPointWidth, animationEnabled, etc.

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