HighCharts In Angular

The Code Points September 02, 2022 0

In this article, we will learn how to create a chart in Angular. For Angular, there are multiple chart libraries available. To create dynamic data binding, we will use Highchart and bind data from a web API.

So, let we start with the implementation part,

First, We need to create a new angular application using the following command.

ng new angular-highcharts

Now, we need to install the Highchart package using the following command.

npm install highcharts

Now, We need to add the HttpClientModule module into the app.module.ts file using the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Now, Add the highchart component into the app.component.html file using the following code.

<div id="container"></div>

Now, Add the following code under the app.component.ts file.

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { HttpClient } from '@angular/common/http';
import { interval, Subscription } from 'rxjs';

declare var require: any;
let Boost = require('highcharts/modules/boost');
let noData = require('highcharts/modules/no-data-to-display');
let More = require('highcharts/highcharts-more');

Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
noData(Highcharts);

@Component({
  selector: 'app-highchart-demo',
  templateUrl: './highchart-demo.component.html',
  styleUrls: ['./highchart-demo.component.css']
})
export class HighchartDemoComponent implements OnInit {
  public options: any = {
    chart: {
      type: 'line',
      height: 500
    },
    title: {
      text: 'Sample Scatter Plot'
    },
    credits: {
      enabled: false
    },
    tooltip: {
      formatter: function() {
        return 'x: ' +  this.x +   '  y: ' + this.y;
      }
    },
    xAxis: {
      categories: []
    },
    series: [
      {
        name: 'Mr. Faisal',
        data: []
      },
      {
        name: 'Mr. Pathan',
        data: []
      }
    ]
  }
  subscription: Subscription;
  constructor(private http: HttpClient) { }

  ngOnInit(){
    // update data again and again after every 5 seconds interval
    //const source = interval(5000);

    // My dummy API
    const apiLink = 'https://api.myjson.com/bins/zg8of';

    this.getApiResponse(apiLink).then(
    //this.subscription = source.subscribe(val =>this.getApiResponse(apiLink).then(
      data => {
        const faisalArr = [];
        const pathanArr = [];
        const xAxisArr = [];

        data.forEach(row => {
          const temp_row = [
            row.Sales_Figure
          ];
          if(xAxisArr.find(ob => ob === row.Month) === undefined){
             xAxisArr.push(row.Month)
          }
          row.Name === 'Faisal' ? faisalArr.push(temp_row) : pathanArr.push(temp_row);
        });

        this.options.xAxis['categories'] = xAxisArr;
        this.options.series[0]['data'] = faisalArr;
        this.options.series[1]['data'] = pathanArr;
        Highcharts.chart('container', this.options);
      },
      error => {
        console.log('Something went wrong.');
      })
    //)
    ;
  }

  async getApiResponse(url: string) {
    const res = await this.http.get<any[]>(url, {})
      .toPromise();
    return res;
  }
}

Now, run the angular application using the ng serve command and see the browser screen.

Conclusion

In this article, we will learn how to create a chart using the HighCharts in Angular.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section.

If you have any doubt or confusion then free to ask in the comment section.