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');
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.