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

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.