Vue.js Multi Series Range Area Chart

Download Vue.js Chart Samples

Example shows Vuejs multi series range area chart with custom colors.

/* App.vue */
<script>
  
  export default {
    data() {
      return {
        options: {
          title: {
            text: "Monthly Average High/Low Temperature",
            fontFamily: "Arial"
          },
          axisX: {
            labelTextAlign: "center",
            valueFormatString: "MMM",
            interval: 1,
            intervalType: "month"
          },
          axisY: {
            title: "Temperature ( in °C)",
            suffix: " °C"
          },
          toolTip: {
            shared: true
          },
          legend: {
            verticalAlign: "top",
            cursor: "pointer",
            itemclick: function (e) {
              if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
              e.dataSeries.visible = false;
              } else {
              e.dataSeries.visible = true;
              }
              e.chart.render();
            }
          },
          data: [{
            type: "rangeArea",
            name: "Alaska",
            color: "#9FA8DA",
            showInLegend: "true",
            xValueFormatString: "MMM YYYY",
            toolTipContent: "<span style='\"font-weight: bold\"'>{x}</span><br/><span style='\"'color: {color};'\"'>{name}</span><br>Min: {y[0]} °C<br/> Max: {y[1]} °C",
            dataPoints: [
              { x: new Date(2019, 0, 1), y: [ -48.5917, 10.9038] },
              { x: new Date(2019, 1, 1), y: [ -43.3525, 12.3194] },
              { x: new Date(2019, 2, 1), y: [ -32.2423, 18.4731] },
              { x: new Date(2019, 3, 1), y: [ -29.4546, 19.2536] },
              { x: new Date(2019, 4, 1), y: [ -19.3477, 26.5583] },
              { x: new Date(2019, 5, 1), y: [ -14.7646, 32.3932] },
              { x: new Date(2019, 6, 1), y: [ -8.13169, 33.3964] },
              { x: new Date(2019, 7, 1), y: [ -17.673, 27.779] },
              { x: new Date(2019, 8, 1), y: [ -24.2034, 22.2688] },
              { x: new Date(2019, 9, 1), y: [ -30.7377, 14.2121] },
              { x: new Date(2019, 10, 1), y: [ -39.7765, 12.857] },
              { x: new Date(2019, 11, 1), y: [ -53.4878, 9.65908] }
            ]
          },
          {
            type: "rangeArea",
            name: "New York",
            color: "#283593",
            showInLegend: "true",
            toolTipContent: "<span style='\"'color: {color};'\"'>{name}</span><br>Min: {y[0]} °C<br/> Max: {y[1]} °C",
            dataPoints: [
              { x: new Date(2019, 0, 1), y: [ -23.3, 17.8] },
              { x: new Date(2019, 1, 1), y: [ -18.3, 22.8] },
              { x: new Date(2019, 2, 1), y: [ -13.3, 25.6] },
              { x: new Date(2019, 3, 1), y: [ -5, 27.2] },
              { x: new Date(2019, 4, 1), y: [ 3, 32.8] },
              { x: new Date(2019, 5, 1), y: [ 6.1, 35] },
              { x: new Date(2019, 6, 1), y: [ 13.9, 38.3] },
              { x: new Date(2019, 7, 1), y: [ 11, 36.111] },
              { x: new Date(2019, 8, 1), y: [ 3, 34.4] },
              { x: new Date(2019, 9, 1), y: [ -0.6, 35.611] },
              { x: new Date(2019, 10, 1), y: [-8.3, 25] },
              { x: new Date(2019, 11, 1), y: [-10, 18.9] }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    }
  }
</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

Area fill color can be customized by setting color property. You can customize the color of line and marker using lineColor and markerColor property.

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