{"id":20089,"date":"2020-07-14T12:00:27","date_gmt":"2020-07-14T11:00:27","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20089"},"modified":"2026-01-13T09:54:32","modified_gmt":"2026-01-13T09:54:32","slug":"firestore-angular-and-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/firestore-angular-and-highcharts\/","title":{"rendered":"Firestore, Angular and Highcharts"},"content":{"rendered":"

 <\/p>\n

In this tutorial, we will learn how to visualize real-time database updates using Firestore<\/a> and the official Highcharts Angular wrapper<\/a>. The entire project is in this GitHub link<\/a>.<\/p>\n

We will cover the following points in this article:<\/p>\n

    \n
  1. Setup a Cloud Firestore project.<\/li>\n
  2. Setup an Angular project with Firestore.<\/li>\n
  3. Integrate Highcharts with Angular and Firestore.<\/li>\n<\/ol>\n

    Setup a Cloud Firestore project<\/h2>\n
      \n
    1. The first thing to do is to create a project, and here are the steps to do that: Login to https:\/\/console.firebase.google.com
      \n\"\"<\/li>\n
    2. Click on Add project.
      \n\"\"<\/li>\n
    3. Create a database.
      \n\"\"<\/li>\n
    4. Select \u201cstart in test mode\u201d.
      \n\"\"<\/li>\n
    5. Create a collection for the database to have multiple documents to store the data.
      \n\"\"<\/li>\n
    6. Add documents to the collection.
      \n\"\"<\/li>\n
    7. Add your Angular App name<\/b> to Firestore<\/b>. Be sure to select Web as we are using the web for now
      \n\"\".<\/li>\n
    8. By registering Angular App Name into Firestore, we will be able to access all key capabilities out of the box.
      \n\"\"<\/li>\n
    9. Get the Configuration details and use the firebaseConfig<\/code> object in the angular app. \"\"<\/li>\n<\/ol>\n

      Setup an Angular project with Firestore<\/h2>\n

      To set up an Angular project, follow the instructions in this link<\/a>.
      \nBy the way, don\u2019t forget to run the following command ng add @angular\/fire<\/code> when you are done with creating the Angular project, and here the reasons why you should do it:<\/p>\n

        \n
      1. To list out all Firebase project. From that, we can choose our project for further configuration and development.<\/li>\n
      2. To create a Firebase.json configuration file that lists your project configuration.<\/li>\n
      3. To create a .firebaserc file that stores your project aliases.<\/li>\n
      4. To update angular.json<\/code> file.<\/li>\n<\/ol>\n

        Once the setup is done, it is time to add Firebase configuration object into the environment (see below):<\/p>\n

        export const environment = {\r\n  production: false,\r\n  firebaseConfig: {\r\n    apiKey: \"AIzaSyBaGUX7iwBRthIKOE_uhyzs1aPEuKPlEAE\",\r\n    authDomain: \"firestore-angular-highcharts.firebaseapp.com\",\r\n    databaseURL: \"https:\/\/firestore-angular-highcharts.firebaseio.com\",\r\n    projectId: \"firestore-angular-highcharts\",\r\n    storageBucket: \"firestore-angular-highcharts.appspot.com\",\r\n    messagingSenderId: \"669023523724\",\r\n    appId: \"1:669023523724:web:43f04e6a2ce0a92c01fca9\",\r\n    measurementId: \"G-ZD6C3CEC85\"\r\n  }\r\n};<\/pre>\n
        The last step in this sec HighchartService to interact with Cloud Firestore API (see below):<\/p>\n
        import {\r\n  Injectable\r\n} from '@angular\/core';\r\nimport {\r\n  Observable\r\n} from 'rxjs';\r\nimport {\r\n  AngularFirestore,\r\n  AngularFirestoreCollection\r\n} from \"@angular\/fire\/firestore\";\r\nimport {\r\n  map\r\n} from \"rxjs\/operators\";\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class HighchartService {\r\n  private rateCollection: AngularFirestoreCollection < chartModal > ;\r\n  rates$: Observable < chartModal[] > ;\r\n  constructor(private readonly firestoreservice: AngularFirestore) {\r\n    this.rateCollection = firestoreservice.collection < chartModal > ('ChartData');\r\n    \/\/ .snapshotChanges() returns a DocumentChangeAction[], which contains\r\n    \/\/ a lot of information about \"what happened\" with each change. If you want to\r\n    \/\/ get the data and the id use the map operator.\r\n    this.rates$ = this.rateCollection.snapshotChanges().pipe(\r\n      map(actions => actions.map(a => {\r\n        const data = a.payload.doc.data() as chartModal;\r\n        const id = a.payload.doc.id;\r\n        return {\r\n          id,\r\n          ...data\r\n        };\r\n      }))\r\n    );\r\n  }\r\n}\r\nexport interface chartModal {\r\n  currency: string,\r\n    rate: number\r\n}<\/pre>\n
        Integrate Highcharts with Angular and Firestore<\/h2>\n
        To visualize the data update on our project using Highcharts, we need to include Highcharts Angular wrapper. It allows us to access the highcharts library. highchats-angular<\/code> is the official angular wrapper.
        \nTo install highcharts-angular and the Highcharts library, just run the following instruction: npm install highcharts-angular highcharts<\/code>.
        \nTo use those packages, first, you have to import them. So, in the app.module.ts file, we import the module HighchartsChartModule<\/code> from the highcharts-angular package.
        \nAlso, we import AngularFirestoreModule<\/code> and initializeApp<\/code> with firebaseConfig (see below):<\/p>\n
          import {\r\n    BrowserModule\r\n  } from \"@angular\/platform-browser\";\r\n  import {\r\n    NgModule\r\n  } from \"@angular\/core\";\r\n  import {\r\n    HighchartsChartModule\r\n  } from \"highcharts-angular\";\r\n  import {\r\n    AppRoutingModule\r\n  } from \".\/app-routing.module\";\r\n  import {\r\n    AppComponent\r\n  } from \".\/app.component\";\r\n  import {\r\n    AngularFireModule\r\n  } from \"@angular\/fire\";\r\n  import {\r\n    environment\r\n  } from \"src\/environments\/environment\";\r\n  import {\r\n    AngularFireAnalyticsModule\r\n  } from \"@angular\/fire\/analytics\";\r\n  import {\r\n    AngularFirestoreModule\r\n  } from \"@angular\/fire\/firestore\";\r\n  @NgModule({\r\n    declarations: [AppComponent],\r\n    imports: [\r\n      BrowserModule,\r\n      AppRoutingModule,\r\n      HighchartsChartModule,\r\n      AngularFireAnalyticsModule,\r\n      AngularFirestoreModule,\r\n      AngularFireModule.initializeApp(environment.firebaseConfig),\r\n    ],\r\n    providers: [],\r\n    bootstrap: [AppComponent],\r\n  })\r\n  export class AppModule {}<\/pre>\n
        Let’s walk through what we are doing in app.component.ts<\/a>.<\/p>\n
        Importing Highcharts<\/code> from import * as Highcharts from \u201chighcharts\u201d; <\/code>.
        \nImporting service and modal from highchart.service<\/code>.
        \nOn ngOnInit()<\/code> we are subscribing the emitting values from filestore database and pushing new values to chartdata<\/code> array and then Calling getChart()<\/code> and initializing chart data.<\/p>\n
        import {\r\n  Component,\r\n  OnInit\r\n} from \"@angular\/core\";\r\nimport {\r\n  HighchartService,\r\n  chartModal\r\n} from \".\/highchart.service\";\r\nimport * as Highcharts from \"highcharts\";\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 = \"Firestore-Angular-Highcharts\";\r\n  items$: chartModal[];\r\n  Highcharts: typeof Highcharts = Highcharts;\r\n  chardata: any[] = [];\r\n  chartOptions: any;\r\n  constructor(private highchartservice: HighchartService) {}\r\n  ngOnInit() {\r\n    this.highchartservice.rates$.subscribe((assets) => {\r\n      this.items$ = assets;\r\n      if (this.items$) {\r\n        this.items$.forEach((element) => {\r\n          this.chardata.push(element.rate);\r\n        });\r\n        this.getChart();\r\n      }\r\n    });\r\n  }\r\n  getChart() {\r\n    this.chartOptions = {\r\n      series: [{\r\n        data: this.chardata,\r\n      }, ],\r\n      chart: {\r\n        type: \"bar\",\r\n      },\r\n      title: {\r\n        text: \"barchart\",\r\n      },\r\n    };\r\n  }\r\n}<\/pre>\n
        The last step to do in this project is to go to app.component.html<\/a> to add highcharts-chart<\/code> directive and some property binding to initialize the chart data and options:<\/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>\r\n<\/pre>\n
        And here is the final result:
        \nAs you can see on the GIF below, the bar chart gets the data from the database hosted on Firebase. When a new value is added to the database using the Firebase UI, the chart\u2019s data is updated and displayed.<\/p>\n
        \"\"<\/p>\n
        Likewise in the below example, we are plotting a Line chart with new values to the same line chart.<\/p>\n
        \"\"<\/p>\n
         <\/p>\n
        Well, that is it. Now, you know how to update a real-time database using Firestore, and how to visualize the update with Highcharts.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Check out how you can combine Cloud Firestore, Highcharts, and Angular to update a database in real-time.<\/p>\n","protected":false},"author":249,"featured_media":20549,"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-20089","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\/20089","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=20089"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20089\/revisions"}],"predecessor-version":[{"id":29308,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20089\/revisions\/29308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20549"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20089"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}