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>
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