Vue.js Dynamic Column Chart

Download Vue.js Chart Samples

Example shows Vuejs dynamic column chart that updates in real-time. In the below example we are updating color of datapoint whenever temperature exceeds the safe range. Similarly you can update any property of chart.

/* App.vue */
<script>
  export default {
    data() {
      return {
        chart: null,
        timeout: null,
        options: {
          title: {
            text: "Temperature of Furnaces"
          },
          axisY: {
            title: "Temperature ( in °C)",
            suffix: " °C",
            minimum: 700,
            stripLines:[{
              value: 1100,
              labelAlign: "near",
              label: "Operating Temp.",
              showOnTop: true,
              color: "#335E28",
              labelFontColor: "#335E28"
            },{
              value: 1500,
              label: "Max Safe Temp.",
              showOnTop: true,
              color: "#A90C0C",
              labelFontColor: "#A90C0C"
            }]
          },
          data: [{
            type: "column",
            yValueFormatString: "#,##0 °C",
            indexLabel: "{y}",
            dataPoints: [
              { label: "Furnace 1", y: 1390 },
              { label: "Furnace 2", y: 1300 },
              { label: "Furnace 3", y: 1560 },
              { label: "Furnace 4", y: 1206},
              { label: "Furnace 5", y: 1400 },
              { label: "Furnace 6", y: 1050 }
            ]
          }]
        },
        styleOptions: {
          width: "100%",
          height: "360px"
        }
      }
    },
    methods: {
      updateData() {
        let boilerColor, deltaY, yVal;
        let dps = this.chart.options.data[0].dataPoints;
        for (let i = 0; i < dps.length; i++) {
          deltaY = Math.round(20 + Math.random() *(-20-20));
          yVal = Math.max(deltaY + dps[i].y, 700);
          boilerColor = yVal > 1500 ? "#FF7043" : yVal >= 1100 ? "#81C784" : "#42A5F5";
          dps[i] = { label: "Furnace "+(i+1) , y: yVal, color: boilerColor };
        }
        this.options.data[0].dataPoints = dps; 
        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

color property can be used to change the color of columns. You can also customize their opacity using fillOpacity property. Other commonly used customization options are indexLabel, animationEnabled, theme, etc.

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