Vue.js Range Area & Line Chart Combination

Download Vue.js Chart Samples

Example shows Vuejs Range Area & Line Chart Combination

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        options: {
          exportEnabled: true,
          title: {
            text: "Temperature Variation"
          },
          subtitles: [{
            text: "California, USA"
          }],
          axisY: {
            title: "Temparature (°C)",
            suffix: "°C"
          },
          axisX: {
            interval: 1,
            intervalType: "month",
            valueFormatString: "MMM",
          },
          toolTip: {
            shared: true
          },
          legend: {
            cursor: "pointer",
            itemclick: this.toggleDataSeries
          },
          data: [{
            type: "rangeArea",
            showInLegend: true,
            name: "Temperature Range",
            yValueFormatString: "##.0 °C",
            xValueFormatString: "MMMM YYYY",
            toolTipContent: "{x}<br><span style='\"'color:{color}'\"'>Min</span>: {y[0]}<br><span style='\"'color:{color}'\"'>Max</span>: {y[1]}",
            xValueType: "dateTime",
            markerSize: 0,
            dataPoints: [
              { x: new Date(2019, 0, 1), y: [-22.4332, 26.701] },
              { x: new Date(2019, 1, 1), y: [-22.8482, 29.9354] },
              { x: new Date(2019, 2, 1), y: [-16.5272, 33.1793] },
              { x: new Date(2019, 3, 1), y: [-10.3894, 39.6753] },
              { x: new Date(2019, 4, 1), y: [-13.1862, 38.289] },
              { x: new Date(2019, 5, 1), y: [-2.9892, 46.6849] },
              { x: new Date(2019, 6, 1), y: [2.20233, 47.2412] },
              { x: new Date(2019, 7, 1), y: [0.975366, 47.4759] },
              { x: new Date(2019, 8, 1), y: [-6.26288, 46.0959] },
              { x: new Date(2019, 9, 1), y: [-9.87604, 37.9325] },
              { x: new Date(2019, 10, 1), y: [-21.6, 33.2763] },
              { x: new Date(2019, 11, 1), y: [-19.3211, 27.0527] }
            ]
          }]
        },
        styleOptions: {
          width: "570px",
          height: "320px"
        }
      }
    },
    methods: {
      toggleDataSeries(e) {
        if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
          e.dataSeries.visible = false;
        }
        else {
          e.dataSeries.visible = true;
        }
        e.chart.render();
      },
      addAverageSeries() {
        let dps = [];
        let chart = this.chart;
        for(let i = 0; i < chart.options.data[0].dataPoints.length; i++) {
          dps.push({
            x: chart.options.data[0].dataPoints[i].x,
            y: (chart.options.data[0].dataPoints[i].y[0] + chart.options.data[0].dataPoints[i].y[1]) / 2
          });
        }
        chart.options.data.push({
          type: "line",
          name: "Average",
          showInLegend: true,
          markerType: "triangle",
          markerSize: 0,
          color: "#EF5350",
          yValueFormatString: "##.0 °C",
          toolTipContent: "<span style='\"'color:{color}'\"'>{name}</span>: {y}",
          dataPoints: dps
        });
        chart.render();
      },
      chartInstance(chart) {
        this.chart = chart;
        this.addAverageSeries();
      }
    }
  }
</script>
  
<template>
    <CanvasJSChart :options="options" :style="styleOptions" @chart-ref="chartInstance"/>
</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 enable legends for dataseries present in the chart by setting showInLegend to true. The text shown in the legends can also be changed using legendText property. Some of the other commonly used customization options include color, markerType, markerSize, etc.

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