{"id":20527,"date":"2021-01-14T13:23:31","date_gmt":"2021-01-14T12:23:31","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20527"},"modified":"2026-01-13T11:17:32","modified_gmt":"2026-01-13T11:17:32","slug":"live-data-with-rxjs-websocket-highcharts-and-angular","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/live-data-with-rxjs-websocket-highcharts-and-angular\/","title":{"rendered":"Live data with RxJs WebSocket, HighCharts, and Angular"},"content":{"rendered":"

 
\nIn this tutorial, we will show you how to visualize real-time updates using RxJs Websocket<\/a> and the official Highcharts Angular wrapper<\/a>. You can access the entire project by clicking on this GitHub link<\/a>.<\/p>\n

Remark<\/b>
\nIn this article, random data are used to update the chart. There is no implementation of server-side code.<\/i><\/p>\n

There are two main parts to create this project:
\nThe 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<\/a>.<\/p>\n

The second part is to set up an Angular project with RxJsWebSocket and Highcharts by going through these three simple steps:<\/p>\n

Step 1<\/b>
\nAs we will use the default protocol WSS(WebSocket protocol<\/a>), the first step in the configuration project is to import the WebSocket import {webSocket}<\/code> from the rxjs\/webSocket<\/code> package.
\nBy 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:
\nThe rxjs pipe<\/b> 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<\/code>, in app.component.ts<\/code>.<\/p>\n

import {\r\n  Component,\r\n  OnInit\r\n} from '@angular\/core';\r\nimport * as Highcharts from 'highcharts';\r\nimport {\r\n  webSocket\r\n} from 'rxjs\/webSocket';\r\nimport {\r\n  of ,\r\n  Subscription\r\n} from 'rxjs';\r\nimport {\r\n  concatMap,\r\n  delay\r\n} from 'rxjs\/operators';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnInit {\r\n  title = 'Angular-RxJsWebSocket-HighCharts';\r\n  rate: any;\r\n  rate$: Subscription;\r\n  Highcharts: typeof Highcharts = Highcharts;\r\n  chardata: any[] = [];\r\n  chartOptions: any;\r\n  subject = webSocket('wss:\/\/ws.coincap.io\/prices?assets=bitcoin')\r\n  ngOnInit() {\r\n    this.rate = this.subject.pipe(\r\n      concatMap(item => of (item).pipe(delay(1000)))\r\n    ).subscribe(data => {\r\n      this.rate = data;\r\n      this.chardata.push(Number(this.rate.bitcoin))\r\n      this.chartOptions = {\r\n        series: [{\r\n          data: this.chardata,\r\n        }, ],\r\n        chart: {\r\n          type: \"line\",\r\n          zoomType: 'x'\r\n        },\r\n        title: {\r\n          text: \"linechart\",\r\n        },\r\n      };\r\n    })\r\n  }\r\n}<\/pre>\n
Step 2<\/b>
\nOnce 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<\/code>), then import the Highcarts module:<\/p>\n
    \n
  • To install highcharts-angular<\/code> and the Highcharts library, just run the following instruction: npm install highcharts-angular highcharts<\/code>.<\/li>\n
  • To import the package go to app.module.ts<\/code> file, and import the module HighchartsChartModule<\/code> from the highcharts-angular<\/code> package.<\/li>\n<\/ul>\n
    import {\r\n  BrowserModule\r\n} from '@angular\/platform-browser';\r\nimport {\r\n  NgModule\r\n} from '@angular\/core';\r\n\r\nimport {\r\n  AppRoutingModule\r\n} from '.\/app-routing.module';\r\nimport {\r\n  AppComponent\r\n} from '.\/app.component';\r\nimport {\r\n  HighchartsChartModule\r\n} from 'highcharts-angular';\r\nimport {\r\n  HttpClientModule\r\n} from '@angular\/common\/http';\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    HttpClientModule,\r\n    HighchartsChartModule\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {}<\/pre>\n
    Step 3<\/b>
    \nThe last step is to initialize the chart data and options by adding the highcharts-chart<\/code> directive and some property binding into app.component.html<\/code>:<\/p>\n
    <highcharts-chart *ngIf=\"chartOptions\"\r\n  [Highcharts]=\"Highcharts\"\r\n  [options]=\"chartOptions\"\r\n  style=\"width: 100%; height: 400px; display: block;\"\r\n><\/highcharts-chart><\/pre>\n
    And here is the final result:
    \nAs 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\u2019s data is updated and displayed.<\/p>\n
    \"Live<\/p>\n
    Feel free to share your experience with Live data using RxJs WebSocket, HighCharts, and Angular in the comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Learn how to create a live interactive chart with Live data with RxJs WebSocket, HighCharts, and AngularJS.<\/p>\n","protected":false},"author":249,"featured_media":21958,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[822,1094,1031],"coauthors":[779],"class_list":["post-20527","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-angular","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20527","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/249"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20527"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20527\/revisions"}],"predecessor-version":[{"id":29336,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20527\/revisions\/29336"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21958"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20527"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}