Angular Dynamic / Live Column Chart

Download Angular Chart Samples

Example shows Angular Dynamic Column Chart with real-time updates.

/* app.component.ts */
import { Component, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app',
  templateUrl: 'chart.component.html',
})
export class AppComponent implements OnDestroy {

  timeout:any = null;
  chart: any;

  chartOptions = {
    title: {
      text: "Temperature of Each Boiler",
      fontFamily: "Trebuchet MS, Helvetica, sans-serif"
    },
    axisY: {
      title: "Temperature (°C)",
      includeZero: true,
      suffix: " °C"
    },
    data: [{
      type: "column",	
      yValueFormatString: "#,### °C",
      indexLabel: "{y}",
      dataPoints: [
        { label: "boiler1", y: 206 },
        { label: "boiler2", y: 163 },
        { label: "boiler3", y: 154 },
        { label: "boiler4", y: 176 },
        { label: "boiler5", y: 184 },
        { label: "boiler6", y: 122 }
      ]
    }]
  }

  getChartInstance(chart: object) {
    this.chart = chart;
    this.updateChart();
  }

  ngOnDestroy() {
    clearTimeout(this.timeout);
  }

  updateChart = () => {
    let boilerColor, deltaY, yVal;
    let dps = this.chart.options.data[0].dataPoints;
    for (let i = 0; i < dps.length; i++) {
      deltaY = Math.round(2 + Math.random() *(-2-2));
      yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0;
      boilerColor = yVal > 200 ? "#C62828" : yVal >= 170 ? "#FF6F00" : yVal < 170 ? "#1B5E20 " : null;
      dps[i] = {label: "Boiler "+(i+1) , y: yVal, color: boilerColor};
    }
    this.chart.options.data[0].dataPoints = dps; 
    this.chart.render();
    this.timeout = setTimeout(this.updateChart, 1000);
  };
}                              
/* 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>

Chart Customizations

The color of the columns can be changed using color property. Other commonly used customization options are dataPointWidth, indexLabel, etc.

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