Vue.js Dynamic Line Chart

Download Vue.js Chart Samples

Example shows Vuejs dynamic line chart that adds new datapoint every 1 second.

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        xValue: 1,
        yValue: 10,
        newDataCount: 10,
        timeout: null,
        options: {
          theme: "light2",
          title:{
            text: "Live Data"
          },
          data: [{
            type: "line",
            dataPoints: []
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    },
    methods: {
      updateData() {
        fetch("https://canvasjs.com/services/data/datapoints.php?xstart="+this.xValue+"&ystart="+this.yValue+"&length="+this.newDataCount+"type=json")
        .then(response => response.json())
        .then(this.addData);
      },
      addData(data) {
        if(this.newDataCount != 1) {
          data.forEach( (val) => {
            this.options.data[0].dataPoints.push({x: val[0], y: parseInt(val[1])});
            this.xValue++;
            this.yValue = parseInt(val[1]);  
          })
        } else {
          this.options.data[0].dataPoints.push({x: data[0][0], y: parseInt(data[0][1])});
          this.xValue++;
          this.yValue = parseInt(data[0][1]);  
        }
        this.newDataCount = 1;
        this.chart.render();
        this.timeout = setTimeout(this.updateData, 1000);
      },
      chartInstance(chart) {
        this.chart = chart;
        this.updateData();
      }
    },
    unmounted() {
      clearTimeout(this.timeout);
    }
  }
</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

The thickness and the color of the lines can be modified using lineThickness and lineColor properties. Other commonly used customization options include markerColor, lineDashType, etc.

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