Using HighCharts with Angular 5

Highcharts provides charts solutions for commercials and non-commercials purpose. They do provide charts for specific purpose of share market solutions (HighStocks). It is separate product offered and different license type altogether.

Of course for commercial use you will need to buy license from them but in my opinion it’s value for the money. For open source projects/non-commercials you can use it free.

Checkout Highcharts here:

Integrating Highcharts with Angular is very easy.

Open command prompt/terminal in Angular project directory path.

Install Highchart library:

npm install — save highcharts

Install typescript types for Highcharts:

npm install — save-dev @types/highcharts

Open “tsconfig.app.json” file from project root level folder and add type attribute:

“types”: [

“highcharts”

]

After this configuration you are all set to use Highcharts in your Angular application.

Add a <div> tag in app.component.html with “local HTML alias”.

<div #chartTarget>

chart target

</div>

Access local HTML alias inside app.component.ts file

@ViewChild(‘chartTarget’) chartTarget: ElementRef;

Import Highcharts types:

import { chart } from ‘highcharts’;

import * as Highcharts from ‘highcharts’;

Create chart object in AppComponent:

chart: Highcharts.ChartObject;

Inside ngAfterViewInit() life cycle hook, create Highcharts.Options object and set chart properties.

Finally, call chart() constructor and pass HTML element accessed via local HTML alias and options object.

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

Run your application using “ng serve” command and check browser output. You should have basic Highcharts displayed.

Updating Highcharts dynamically

It is very easy to update Highcharts dynamically. You can access member variables and functions of Highchart.ChartObject object.

For example, if new series has to be added on button click then code should look like this:

addSeries(){

this.chart.addSeries({

name:’Balram’,

data:[2,3,7]

});

Check out live website here:

Source code is on GitHub:

You should see output something like this:

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store