Angular 5 – Charts

Hi Friends,

Hope you are all well. This is one of the most requested posts on this channel. In this post let’s see how to pull data from a Firestore collection and display it in charts in an angular 5 app.

Let’s begin.

Code for this post is available – here

As with all my previous posts, I have created a new project with Angular-cli and installed firebase, angularfire2 and material 2 to it.

Add the firebase configuration details to environment.ts file as shown below.

Now create a new service

We’ll have a simple form that would contain three fields, namely Country, Gender and Rating.

Upon saving this info to our firestore collection, this data would be pulled again and then shown up in a pie-chart.

We’ll be using a ngModule called ngx-charts for this purpose. Install it using the below command.

Country and gender would be select fields while rating would be a radio group. I am importing everything in app.module.ts as shown below.

Now open up app.component.html and add the below code.

Now open up app.component.ts file and add the below code.

Open up vote.service.ts file and add the below code.

Now we have written code to save data to our firestore collection called surveys.

Let’s throw in a pie-chart in there.

Open up app.component.html and add code as shown below.

Now open up app.component.ts and add the below code too.

Let’s break this down;

The processData() function is the one that gets the data and. Wait, where does this data come from ? Look at ngOnInit(). We are pulling the data from firestore (in the service) on Initialization. This data is then sent to processData() function.

In this function we are simple dissecting the array of objects and creating a new array in which the key represents the country name and the value represents the number of occurrences of that country in the result data-set.

Let’s run this code. If everything goes fine you would see a screen like this.


Nice..  (Remember you have to save some entries by filling the form above this chart so that there is some data to be shown).

You could also make different types of pie charts by making simple tweaks. For eg., open up your app.component.ts and set explodeSlices to true.

Now your chart would look like as shown below.


‘Cool.. Right.. Now I feel you would have an idea to bring in charts into your app.

Charts could be used for visual representation of large sets of data to be understood at a glance. Though this has a number of use cases, let’s build a simple rating system that uses a horizontal bar chart to denote the average rating of a product based on ratings given by users in our next post.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading. Peace.. :)


Liked it? Take a second to support admin on Patreon!
  • Thanks!

    • Thanks for reading.. Have a nice day.. :)

  • Maneesha Rakesh

    Hi I am new to angular. I tried your example and configured as per mentioned. But I have no idea why getting the below error.
    @firebase/firestore: Firestore (5.0.0): Could not reach Firestore backend.

    Please help.

  • Leandrit Ferizi

    It would be great to have a Gantt Chart tutorial with Angular 5 :/