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