Using HighCharts with Angular 5

Balram Chavan
2 min readDec 12, 2017

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”.

--

--

Balram Chavan
Balram Chavan

Written by Balram Chavan

Google Developer Expert Angular | Architect | Author | http://www.youtube.com/@angularcloud

Responses (11)