Vue.js Range Area Chart

Download Vue.js Chart Samples

Example shows Vuejs range area chart with custom x & y-value formatting in tooltip content.

/* App.vue */
<script>
  export default {
    data() {
      return {
        options: {
          animationEnabled: true,
          theme: "light2",
          title: {
            text: "GOOGL Stock Price"
          },
          subtitles: [{
            text: "High and Low Price"
          }],
          axisX: {
            valueFormatString: "MMM",
            interval: 1,
            intervalType: "month"
          },
          axisY: {
            title: "Price in USD",
            prefix: "$"
          }, 
          toolTip: {
            shared: true,
          },
          data: [{
            type: "rangeArea",
            yValueFormatString: "$#,##0.#",
            xValueFormatString: "MMM YYYY",
            toolTipContent: "<b><span style='\"'color: {color};'\"'>{x}</span></b><br/>High: {y[0]}<br/>Low: {y[1]}",
            dataPoints: [
            { x: new Date(2020, 0, 1), y:  [67.324501, 75.028999] },
            { x: new Date(2020, 1, 1), y:  [63.4105, 76.537003] },
            { x: new Date(2020, 2, 1), y:  [50.443501, 70.4095] },
            { x: new Date(2020, 3, 1), y:  [53.754002, 68.0075] },
            { x: new Date(2020, 4, 1), y:  [64.800499, 72.255501] },
            { x: new Date(2020, 5, 1), y:  [67.582497, 73.789497] },
            { x: new Date(2020, 6, 1), y:  [70.709, 79.352501] },
            { x: new Date(2020, 7, 1), y:  [73.2015, 82.639503] },
            { x: new Date(2020, 8, 1), y:  [70.107498, 86.305] },
            { x: new Date(2020, 9, 1), y:  [71.661499, 84.066002] },
            { x: new Date(2020, 10, 1), y: [80.605499, 90.844498] },
            { x: new Date(2020, 11, 1), y: [84.699997, 92.191498] }
            ]
          }]
        },
        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

Format of value shown in axis label can be customized by setting valueFormatString. Similarly, x-value & y-value shown in indexlabel & tooltip can be customized by setting xValueFormatString & yValueFormatString properties respectively.

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