Vue.js Multi Series Range Spline Area Chart

Download Vue.js Chart Samples

Example shows Vuejs multi-series range spline area chart with custom tooltip content.

/* App.vue */
<script>
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          theme: "light2",
          title: {
            text: "Temperature Comparison"
          },
          axisY: {
            title: "Temperature (°C)",
            suffix: "°C"
          }, 
          toolTip: {
            shared: true
          },
          legend: {
            cursor: "pointer",
            verticalAlign: "top",
            itemclick: this.toggleDataSeries
          },
          data: [{
            type: "rangeSplineArea",
            name: "Muscat, Oman",
            showInLegend: true,
            color: "#3949AB",
            yValueFormatString: "#0.#°C",
            toolTipContent: "{label}<br/><span style='\"'color: {color};'\"'>{name}</span>: Min: {y[0]}, Max: {y[1]}",
            dataPoints: [
              { label: "2014", y: [19.9, 39.6] },
              { label: "2015", y: [21.0, 41.2] },
              { label: "2016", y: [20.7, 40.7] },
              { label: "2017", y: [20.8, 40.5] },
              { label: "2018", y: [21.4, 40.9] },
              { label: "2019", y: [21.1, 38.5] },
              { label: "2020", y: [20.5, 38.1] }
            ]
          },{
            type: "rangeSplineArea",
            name: "Toronto, Canada",
            showInLegend: true,
            color: "#00ACC1",
            yValueFormatString: "#0.#°C",
            xValueFormatString: "MMM YYYY",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span>: Min: {y[0]}, Max: {y[1]}",
            dataPoints: [
              { label: "2014", y: [-8.2, 22.7] },
              { label: "2015", y: [-8.1, 24.13] },
              { label: "2016", y: [-7.8, 26.1] },
              { label: "2017", y: [-6.6, 24.7] },
              { label: "2018", y: [-6.8, 25.3] },
              { label: "2019", y: [-7.8, 23.3] },
              { label: "2020", y: [-6.7, 24.6] }
            ]
          }]
        },
        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

Content of toolTip can be customized using the toolTipContent property. Some other commonly used customization options include showInLegend, shared tooltip, etc.

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