Live data with RxJs WebSocket, HighCharts, and Angular

 
In this tutorial, we will show you how to visualize real-time updates using RxJs Websocket and the official Highcharts Angular wrapper. You can access the entire project by clicking on this GitHub link.

Remark
In this article, random data are used to update the chart. There is no implementation of server-side code.

There are two main parts to create this project:
The first part is to set up an Angular project. For that, follow the standard instructions in this Angular guideline: setting up the local environment and workspace.

The second part is to set up an Angular project with RxJsWebSocket and Highcharts by going through these three simple steps:

Step 1
As we will use the default protocol WSS(WebSocket protocol), the first step in the configuration project is to import the WebSocket import {webSocket} from the rxjs/webSocket package.
By the way, if you are not familiar with WSS, here is a short explanation of what happens when there is a subscription to a socket:
The rxjs pipe is a method that is used for composing operators. The Emitted values, that are received on subscription, are simply pushed in an array and assigned to data property, which is part of chartoption, in app.component.ts.

import {
  Component,
  OnInit
} from '@angular/core';
import * as Highcharts from 'highcharts';
import {
  webSocket
} from 'rxjs/webSocket';
import {
  of ,
  Subscription
} from 'rxjs';
import {
  concatMap,
  delay
} from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Angular-RxJsWebSocket-HighCharts';
  rate: any;
  rate$: Subscription;
  Highcharts: typeof Highcharts = Highcharts;
  chardata: any[] = [];
  chartOptions: any;
  subject = webSocket('wss://ws.coincap.io/prices?assets=bitcoin')
  ngOnInit() {
    this.rate = this.subject.pipe(
      concatMap(item => of (item).pipe(delay(1000)))
    ).subscribe(data => {
      this.rate = data;
      this.chardata.push(Number(this.rate.bitcoin))
      this.chartOptions = {
        series: [{
          data: this.chardata,
        }, ],
        chart: {
          type: "line",
          zoomType: 'x'
        },
        title: {
          text: "linechart",
        },
      };
    })
  }
}

Step 2
Once the project configuration is done; we have to access the Highcharts library to visualize the data update. To achieve that, we have to include the official Highcharts Angular wrapper (highcharts-angular), then import the Highcarts module:

• To install highcharts-angular and the Highcharts library, just run the following instruction: npm install highcharts-angular highcharts.
• To import the package go to app.module.ts file, and import the module HighchartsChartModule from the highcharts-angular package.

import {
  BrowserModule
} from '@angular/platform-browser';
import {
  NgModule
} from '@angular/core';

import {
  AppRoutingModule
} from './app-routing.module';
import {
  AppComponent
} from './app.component';
import {
  HighchartsChartModule
} from 'highcharts-angular';
import {
  HttpClientModule
} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    HighchartsChartModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3
The last step is to initialize the chart data and options by adding the highcharts-chart directive and some property binding into app.component.html:

<highcharts-chart *ngIf="chartOptions"
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

And here is the final result:
As you can see on the GIF below, the line chart gets the WebSocket URL data once the connection is made. Whenever a new message comes from the server, WebSocketSubject will emit that message a value in the stream the chart’s data is updated and displayed.

Feel free to share your experience with Live data using RxJs WebSocket, HighCharts, and Angular in the comment section below.