Example shows an Angular Chart with real-time updates - also called as Dynamic Charts. Supports adding / removing all the elements of the charts dynamically including datapoints, chart-title, axis, etc. Real-time updation is available across all the chart-types.
/* app.component.ts */ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { dps = [{x: 1, y: 10}, {x: 2, y: 13}, {x: 3, y: 18}, {x: 4, y: 20}, {x: 5, y: 17},{x: 6, y: 10}, {x: 7, y: 13}, {x: 8, y: 18}, {x: 9, y: 20}, {x: 10, y: 17}]; chart: any; chartOptions = { exportEnabled: true, title: { text: "Angular Dynamic Chart" }, data: [{ type: "line", dataPoints: this.dps }] } getChartInstance(chart: object) { this.chart = chart; setTimeout(this.updateChart, 1000); //Chart updated every 1 second } updateChart = () => { var yVal = this.dps[this.dps.length - 1].y + Math.round(5 + Math.random() *(-5-5)); this.dps.push({x: this.dps[this.dps.length - 1].x + 1, y: yVal}); if (this.dps.length > 10 ) { this.dps.shift(); } this.chart.render(); setTimeout(this.updateChart, 1000); //Chart updated every 1 second } }
/* app.module.ts */ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, CanvasJSAngularChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
/* app.component.html */ <div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}" (chartInstance)="getChartInstance($event)"></canvasjs-chart> </div>
You can manually override the automatic enabling/disabling of markers by setting markerSize. In case of area chart, you can disable line by setting lineThickness to 0.