Using Highcharts with Angular 7

Highcharts is used by developers to setup charts for visualizing data and I relatively found it easy when using it with Angular. Be it plots , graphs , pie, maps highcharts will provide you with various options to visualize data. It can be used for both non-commercial as well as commercial purposes. You can check the official documentation here .

Integrating highcharts with Angular is a pretty easy one:-

Hoping you've already installed Angular and Node.js on your desktop, if not click here for help in setting up.

Open command prompt in your Angular project directory.

Install highcharts from npm:

npm i --save angular-highcharts highcharts.

And now you are done with setting up highcharts for your angular project, we'll now learn it's usage by working on a example.

In your app.module.ts add the following lines.

//app.module.ts
import { ChartModule } from 'angular-highcharts';

@NgModule({
  imports: [
    ChartModule // add ChartModule to your imports
  ]
})

Now create a service for injecting highcharts as a service and to use it throughout the project.

//highcharts.service.ts
import * as Highcharts from 'highcharts';
import { Injectable } from '@angular/core';

@Injectable()
export class HighchartsService {
    constructor() {
    }

    createChart(el, cfg) {
      Highcharts.chart(el, cfg);
    }
}

After you are done with creating the service, make the following changes to your app.module.ts.

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { ChartModule } from 'angular-highcharts';
import { HighchartsService } from './highcharts.service.ts';

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

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

Add the following lines to your app.component.html

Now you can access the alias of the HTML by changing the app.component.ts

//app.component.ts
import {  Component, OnInit, ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('charts') public chartEl: ElementRef;
}

Create an object for the highcharts service in the constructor and use it in the lifecycle hook ngOnInit().

Set options to display our chart and pass the same to the call in ngOnInit() along with the local alias of the HTML.

//app.component.ts
import {  Component, OnInit, ElementRef, ViewChild} from '@angular/core';
import { Chart } from 'angular-highcharts';
import { HighchartsService } from './highcharts.service.ts'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('charts') public chartEl: ElementRef;
  constructor(private highcharts: HighchartsService) { }
  ngOnInit(){
    this.highcharts.createChart(this.chartEl.nativeElement, this.myOptions);
  }
   myOptions = {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Stacked bar chart'
    },
    xAxis: {
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
      name: 'John',
      data: [5, 3, 4, 7, 2]
    }, {
      name: 'Jane',
      data: [2, 2, 3, 2, 1]
    }, {
      name: 'Joe',
      data: [3, 4, 4, 2, 5]
    }]
  };
}

Run your project using npm start and you'll have a chart displayed like this

You can find the demo of the project here

Hope it helps!