New to Kendo UI for Angular? Start a free 30-day trial

Implementing Real-Time Charts with WebSockets


ProductProgress® Kendo UI® for Angular Charts


How can I display real-time data which comes from a WebSocket server in the Kendo UI for Angular Chart?


Apart from displaying real-time data which comes from a WebSocket, the Chart provides options for setting a bidirectional (full-duplex) type of communication and allows multiple clients to push messages to the server, which will be received from all connected clients.

For the full implementation of the approach, refer to the sample GitHub project.

Configuring the Server

The sample project features a Node.js Express server, which serves the Angular application and provides the data feed for the Chart through a WebSocket stream.

The following example demonstrates how to set the HTTP server.

    app.use(express.static(path.join(__dirname, '../../dist/websocket-charts')));

    app.get('*', (req, res) => {
        res.sendFile(path.join(__dirname, '../../dist/websocket-charts/index.html'));

    const port = process.env.PORT || 8000;
    const server = http.createServer(app);

    server.listen(port, () => {
        console.log(`HTTP server running on port ${port}...`);

The following example demonstrates how to set the WebSocket server.

    const wsPort = 8088;
    const wsServer = new ws.Server({port: wsPort});

    console.log(`WebSocket server is running on port ${wsPort}...`);

            websocket => {
                    setInterval(() => {
                    // Broadcasting to all clients
                        client => client.send(JSON.stringify({
                        value: Math.random() * 50,
                        time: new Date()
                    }, 1000);

                    // Broadcasting messages from any client to all clients
                    websocket.on('message', message => {
                    const now = new Date();
                        client => client.send(JSON.stringify({
                        text: message,
                        time: now })));

Configuring the Client

The following example demonstrates how to configure the WebSocket service.

    import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs';

    export class WebSocketService {
        public ws: WebSocket;

        public createObservableSocket(url: string): Observable<string> {
   = new WebSocket(url);

            return Observable.create(observer => {
           = event =>;
           = event => observer.error(event);
           = event => observer.complete();

        public sendMessage(message: any): void {

Configuring the Chart

The following example demonstrates how to configure the Chart.

    <kendo-chart [transitions]="false">
            <kendo-chart-title text="Current temp (&deg;C)"></kendo-chart-title>
                yField="value" xField="time">
    public chartValues = [];
    public messages = [];
    public min: Date = new Date();
    public max: Date = new Date(this.min.getTime() + 20000);
    private url = 'ws://localhost:8088';

    constructor(private wsService: WebSocketService) {
        .subscribe(m => {
            const item: any = JSON.parse(m);
            item.time = new Date(item.time);
            if (item.value) {
            this.chartValues = [...this.chartValues, item];
            if (this.chartValues.length > 20) {
                this.min = this.chartValues[this.chartValues.length - 20].time;
                this.max = item.time;
            } else {
            this.messages = [...this.messages, item];