In Focus

Creating Chart In Angular 7

Here, we will learn how we can create a chart in Angular 7.

Introduction

 
There are a lot of chart libraries available for Angular 7. We are going to use Highchart and will bind the data from Web API to make dynamic data binding.

Prerequisite

  • Basic knowledge of Angular 7
  • Visual Studio Code
  • Angular CLI must be installed
  • NodeJS must be installed
Let’s get started.
 
Open Visual Studio Code and open a new terminal.
 
Creating Chart In Angular 7
 
Type the following command in it.
  1. ng new angular7-highcharts  
In the questions asked on the screen, answer "Yes" for Angular routing and use CSS for the stylesheet.
 
Creating Chart In Angular 7
 
We will also need to install the Highchart as we are going to use this library. 
 
Creating Chart In Angular 7
 
Open the project in Visual Studio Code by opening the folder.
 
Creating Chart In Angular 7
 
Choose your project folder and open it.
 
Creating Chart In Angular 7
 
Now, let’s create the component for the project. So, open the terminal and type the following command.
  1. ng g c highchart-demo  
Creating Chart In Angular 7
 
Now, we are done with the installation and project setup. So, let us add logic for Highchart.
 
Open the app.component.html file and add the highlighted line in it.
 
Creating Chart In Angular 7
  1. <app-highchart-demo></app-highchart-demo>  
Open the highchart-demo.component.ts file and replace the code with the below code in it.
 
Creating Chart In Angular 7
  1. import { Component, OnInit } from '@angular/core';  
  2. import * as Highcharts from 'highcharts';  
  3. import { HttpClient } from '@angular/common/http';  
  4. import { interval, Subscription } from 'rxjs';  
  5. declare var require: any;  
  6. let Boost = require('highcharts/modules/boost');  
  7. let noData = require('highcharts/modules/no-data-to-display');  
  8. let More = require('highcharts/highcharts-more');  
  9. Boost(Highcharts);  
  10. noData(Highcharts);  
  11. More(Highcharts);  
  12. noData(Highcharts);  
  13. @Component({  
  14.   selector: 'app-highchart-demo',  
  15.   templateUrl: './highchart-demo.component.html',  
  16.   styleUrls: ['./highchart-demo.component.css']  
  17. })  
  18. export class HighchartDemoComponent implements OnInit {  
  19.   public options: any = {  
  20.     chart: {  
  21.       type: 'line',  
  22.       height: 500  
  23.     },  
  24.     title: {  
  25.       text: 'Sample Scatter Plot'  
  26.     },  
  27.     credits: {  
  28.       enabled: false  
  29.     },  
  30.     tooltip: {  
  31.       formatter: function() {  
  32.         return 'x: ' +  this.x +   '  y: ' + this.y;  
  33.       }  
  34.     },  
  35.     xAxis: {  
  36.       categories: []  
  37.     },  
  38.     series: [  
  39.       {  
  40.         name: 'Mr. Faisal',  
  41.         data: []  
  42.       },  
  43.       {  
  44.         name: 'Mr. Pathan',  
  45.         data: []  
  46.       }  
  47.     ]  
  48.   }  
  49.   subscription: Subscription;  
  50.   constructor(private http: HttpClient) { }  
  51.   ngOnInit(){  
  52.     // update data again and again after every 5 seconds interval  
  53.     //const source = interval(5000);  
  54.     // My dummy API  
  55.     const apiLink = 'https://api.myjson.com/bins/zg8of';  
  56.     this.getApiResponse(apiLink).then(  
  57.     //this.subscription = source.subscribe(val =>this.getApiResponse(apiLink).then(  
  58.       data => {  
  59.         const faisalArr = [];  
  60.         const pathanArr = [];  
  61.         const xAxisArr = [];  
  62.         data.forEach(row => {  
  63.           const temp_row = [  
  64.             row.Sales_Figure  
  65.           ];  
  66.           if(xAxisArr.find(ob => ob === row.Month) === undefined){  
  67.              xAxisArr.push(row.Month)  
  68.           }  
  69.           row.Name === 'Faisal' ? faisalArr.push(temp_row) : pathanArr.push(temp_row);  
  70.         });  
  71.         this.options.xAxis['categories'] = xAxisArr;  
  72.         this.options.series[0]['data'] = faisalArr;  
  73.         this.options.series[1]['data'] = pathanArr;  
  74.         Highcharts.chart('container'this.options);  
  75.       },  
  76.       error => {  
  77.         console.log('Something went wrong.');  
  78.       })  
  79.     //)  
  80.     ;  
  81.   }  
  82.   async getApiResponse(url: string) {  
  83.     const res = await this.http.get<any[]>(url, {})  
  84.       .toPromise();  
  85.     return res;  
  86.   }  
  87. }  
Open the app.module.ts file present at the root folder and add the HttpClientModule references there.
 
Creating Chart In Angular 7 
  1. import { HttpClientModule } from '@angular/common/http';  
Open the highchart-demo.component.html file add the below HTML tag in it to display our chart.
 
Creating Chart In Angular 7
  1. <div id="container"></div>  
That’s it. Now, fire the below command to see the magic!
  1. ng serve  
Creating Chart In Angular 7
 
Open your browser on http://localhost:4200/ or click on “http://localhost:4200/” it.
 

Output

 
Creating Chart In Angular 7
Please give your valuable feedback/comments/questions about this article below. Please let me know if you liked this article and comment below to tell how I could improve it.
 
You can download the source code from here.