Using Highcharts in an Angular-cli project posted on Sep 19, 2017

Highcharts is a great tool for visualizing data, and it is getting ever more popular so the chances are at some point you are going to want to use it in an Angular project. Luckily doing so is easy. Here are the steps to get the Your First Chart example running in a new angular-cli project.

Add the Highcharts library to the project

  

npm install --save highcharts

Add the Highcharts typings

  

npm install --save-dev  @types/highcharts

Amend tsconfig.app.json to add the types

  

"types": [
  "highcharts"
]

Add an element to app.component.html for Highcharts to target

  

<h1>{{title}}</h1>
<div #chartTarget>
  chart target
</div>

Use a ViewChild and local variable to get a reference to the target element in the component

  

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

import { chart } from 'highcharts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('chartTarget') chartTarget: ElementRef;
  ...
}

Create the chart

This has to be done in AfterViewInit as the element won’t have bee rendered in OnInit. Also we can keep a reference to the ChartObject.

  

chart: Highcharts.ChartObject;

ngAfterViewInit() {
  const options: Highcharts.Options = {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'Jane',
      data: [1, 0, 4]
    }, {
      name: 'John',
      data: [5, 7, 3]
    }]
  };

  this.chart = chart(this.chartTarget.nativeElement, options);
}

Make sure the chart gets destroyed along with the component

  

  ngOnDestroy() {
    this.chart = null;
  }

And everything should be good

AngularHighchart

Here is the complete app.component.ts code.

  

import { Component, OnInit, ViewChild, ElementRef, AfterContentInit, OnDestroy } from '@angular/core';

import { chart } from 'highcharts';

@Component({
  selector: 'app-chart1',
  templateUrl: './chart1.component.html',
  styleUrls: ['./chart1.component.css']
})
export class Chart1Component implements OnInit, AfterContentInit, OnDestroy {
  @ViewChild('chartTarget') chartTarget: ElementRef;
  chart: Highcharts.ChartObject;


  constructor() { }

  ngOnInit() {
  }

  ngAfterContentInit() {
    const options: Highcharts.Options = {
      chart: {
        type: 'bar'
      },
      title: {
        text: 'Fruit Consumption'
      },
      xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
      },
      yAxis: {
        title: {
          text: 'Fruit eaten'
        }
      },
      series: [{
        name: 'Jane',
        data: [1, 0, 4]
      }, {
        name: 'John',
        data: [5, 7, 3]
      }]
    };

    this.chart = chart(this.chartTarget.nativeElement, options);
  }

  ngOnDestroy() {
    this.chart = null;
  }
}