How to Update the Angular Charts with Live Data

Update a chart in real time by refreshing it on a timer. The Chart component repaints with the latest data each time you call its refresh method, which makes it straightforward to stream live values.

To update the chart with live data, follow these steps:

Step 1:

Initialize the Chart component with a series and a chart-level loaded handler that starts the live update. Disable animation to prevent visual jitter on each refresh.

import { Component, ViewChild } from '@angular/core';
import { ChartComponent } from '@syncfusion/ej2-angular-charts';

@Component({
    selector: 'app-container',
    // specifies the template string for the Chart component
    template: `<ejs-chart #chart id='chart-container' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' (loaded)='loaded($event)'>
                  <e-series-collection>
                      <e-series [dataSource]='series1' type='Line' xName='x' yName='y' [animation]='animation'></e-series>
                  </e-series-collection>
               </ejs-chart>`
})
export class AppComponent {
    @ViewChild('chart')
    public chart?: ChartComponent;
    public series1: Object[] = [];
    public primaryXAxis: Object = {};
    public primaryYAxis: Object = { minimum: 0, maximum: 50 };
    public title: string = 'Live Chart';
    public animation: Object = { enable: false };
}

Step 2:

Seed the series with an initial set of points and start a timer that pushes a new value, slides the window, and calls refresh() on each tick.

import { ChartModule, ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-angular-charts'
import { AccumulationChartModule } from '@syncfusion/ej2-angular-charts'
import { PieSeriesService, AccumulationTooltipService, AccumulationDataLabelService } from '@syncfusion/ej2-angular-charts'
import {
    LineSeriesService, DateTimeService, DataLabelService, StackingColumnSeriesService, CategoryService,
    StepAreaSeriesService, SplineSeriesService, ScrollBarService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
    SelectionService, ScatterSeriesService, ZoomService, ColumnSeriesService, AreaSeriesService, RangeAreaSeriesService
} from '@syncfusion/ej2-angular-charts'


import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import { ILoadedEventArgs, ChartComponent } from '@syncfusion/ej2-angular-charts';
import { getElement } from '@syncfusion/ej2-charts';

@Component({
imports: [
         ChartModule, ChartAllModule, AccumulationChartAllModule, AccumulationChartModule
    ],

providers: [LineSeriesService, DateTimeService, ColumnSeriesService, DataLabelService, ZoomService, StackingColumnSeriesService, CategoryService,
        StepAreaSeriesService, SplineSeriesService, ChartAnnotationService, LegendService, TooltipService, StripLineService,
        PieSeriesService, AccumulationTooltipService, ScrollBarService, AccumulationDataLabelService, SelectionService, ScatterSeriesService,
       AreaSeriesService, RangeAreaSeriesService ],
standalone: true,
    selector: 'app-container',
    template: `<ejs-chart #chart id='chart-container' [chartArea]='chartArea' [width]='width' align='center'  [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' [title]='title' (loaded)='loaded($event)'>
        <e-series-collection>
            <e-series [dataSource]='series1' type='Line' xName='x' yName='y' width=2 [animation]='animation1'>
            </e-series>
        </e-series-collection>
    </ejs-chart>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public series1: Object[] = [];
    public value: number = 10;
    public intervalId?: any;
    public setTimeoutValue?: number;
    public i: number = 0;
    //Initializing Primary Y Axis
    public primaryYAxis: Object = {
        minimum:0,
        maximum: 50
    };
    @ViewChild('chart')
    public chart?: ChartComponent;

    public marker: Object = {
        visible: true
    };
    public animation1: Object = {
        enable: false
    };
    chartArea: any;
    width: any;
primaryXAxis: any;
title: any;
    public loaded(args: ILoadedEventArgs): void {
        this.setTimeoutValue = 100;
        this.intervalId = setInterval(
            () => {
                let i: number;
                if (getElement('chart-container') === null) {
                    clearInterval(this.intervalId);
                } else {
                    if (Math.random() > .5) {
                        if (this.value < 25) {
                            this.value += Math.random() * 2.0;
                        } else {
                            this.value -= 2.0;
                        }
                    }
                    this.i++;
                    this.series1.push({ x: this.i, y: this.value });
                    this.series1.shift();
                    args.chart.series[0].dataSource = this.series1;

                    args.chart.refresh();
                }
            },
            this.setTimeoutValue);
    }
    constructor() {
        for (; this.i < 100; this.i++) {
            if (Math.random() > .5) {
                if (this.value < 25) {
                    this.value += Math.random() * 2.0;
                } else {
                    this.value -= 2.0;
                }
            }
            this.series1[this.i] = { x: this.i, y: this.value };

        }

    };

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

How it works: the constructor fills series1 with 100 points. On each setInterval tick, the handler pushes a new { x, y } value, removes the oldest point with shift(), reassigns series[0].dataSource, and calls refresh so the Chart component re-renders with the latest data. The getElement('chart-container') check stops the timer if the chart is removed from the DOM.

Note: Always clear the timer (clearInterval) when the component is destroyed (for example, in ngOnDestroy) to avoid memory leaks. Add a LineSeriesService (and any other series services you reference) to the component’s providers array.

Troubleshooting

  • Chart flickers on every tick – keep animation: { enable: false } on the series; otherwise each refresh() replays the enter animation.
  • Memory leak on navigation – make sure the component clears its setInterval handle when it is destroyed.
  • Y values drift outside the axis range – the primaryYAxis in the sample is fixed to { minimum: 0, maximum: 50 }; widen it if your live values exceed that range.

See also