- Angular Highcharts - Map Charts
- Angular Highcharts - 3D Charts
- Angular Highcharts - Combinations
- Angular Highcharts - Dynamic Charts
- Angular Highcharts - Scatter Chart
- Angular Highcharts - Pie Charts
- Angular Highcharts - Column Charts
- Angular Highcharts - Bar Charts
- Angular Highcharts - Area Charts
- Angular Highcharts - Line Charts
- Configuration Syntax
- Environment Setup
- Angular Highcharts - Overview
- Angular Highcharts - Home
Angular Highcharts Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Angular Highcharts - Environment Setup
This tutorial will guide you on how to prepare a development environment to start your work with Highcharts and Angular Framework. In this chapter, we will discuss the Environment Setup required for Angular 6. To install Angular 6, we require the following −
Nodejs
Npm
Angular CLI
IDE for writing your code
Nodejs has to be greater than 8.11 and npm has to be greater than 5.6.
Nodejs
To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system.
C:>node -v v8.11.3
If it does not print anything, install nodejs on your system. To install nodejs, go the homepage
of nodejs and install the package based on your OS.The homepage of nodejs will look pke the following −
Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm.
C:>npm -v 5.6.0
Angular 6 installations are very simple with the help of angular CLI. Visit the homepage
of angular to get the reference of the command.Type npm install -g @angular/cp, to install angular cp on your system.
You will get the above installation in your terminal, once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc.
Install Highcharts
Run the following command to install highchart module in the project created.
highchartsApp>npm install highcharts --save + highcharts@6.2.0 added 1 package in 137.534s
Run the following command to install highchart wrapper module in the project created.
highchartsApp>npm install highcharts-angular --save + highcharts-angular@2.3.1 added 1 package in 20.93s
Add the following entry in highchartsApp.module.ts file
import { HighchartsChartComponent } from highcharts-angular ; declarations: [ ... HighchartsChartComponent ],Advertisements