Highcharts In Angular2 or Latest Version

Prerequisite: 
To building your Highcharts application, the first step is the installation of the node.js framework from the official website https://nodejs.org/en/. Once the Node.js is installed, you need to installation of @angular/cli. To install Angular CLI used command in command prompt/shell.

npm install -g @angular/cli

After successfully installed Angular CLI, you can create your angular application with ng new command.

[Syntax : ng new project_name]
ng new highchart-app
cd highchart-app
ng serve

Highcharts Description & Installation:

Hightcharts create interactive charts easily. This directive is for Angular2 or latest version. You can start to building application of Highcharts on Angular; install directives of Highcharts to your project.

npm install:

# install highcharts
npm install --save highcharts
# install angular-highcharts
npm install –save angular-highchartsOR

# angular5 npm install –save angular-highcharts@5
# angular6 npm install –save angular-highcharts@6

npm install for typescript (ES5):

# install highcharts typings
npm i --save-dev @types/highcharts

We need to install @types/highcharts npm dev dependency. Because this package contains type definitions for Highcharts.

Highcharts Example:

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartModule } from 'angular-highcharts'; // highchart module
import { AppComponent } from ‘./app.component’;@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ChartModule // add ChartModule to import
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

//app.component.html

Welcome to Highcharts!

// app.component.ts

import { Component, OnInit } from '@angular/core';import { Chart } from ‘angular-highcharts’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent implements OnInit {
chartData;
chartOptions;

ngOnInit() {
this.getColumnChart();
}

getColumnChart() {
this.chartOptions = {
chart: {
type: ‘column’
},
title: {
text: ‘Yearly Reports’
},
xAxis: {
categories: [‘SQL’, ‘JAVA’, ‘JAVASCRIPT’, ‘PYTHON’, ‘C#’, ‘Android’, ‘IOS’, ‘RUBY/RAILS’],
crosshair: true
},
yAxis: {
title: {
text: ‘Programming Langulage (%)’
}
},
tooltip: {
pointFormat: ‘{series.name}: {point.y:.2f} %
},
credits: {
enabled: false
},
series: [{
name: ‘Most In-Demand Programming Languages’,
data: [
[‘SQL’, 85.15],
[‘JAVA’, 90.80],
[‘JAVASCRIPT’, 95.25],
[‘PYTHON’, 80.56],
[‘C#’, 82.45],
[‘Android’, 78.43],
[‘IOS’, 86.84],
[‘RUBY/RAILS’, 76.36],
]
}]
};

// Constructor: new Chart(options: Options)
this.chartData = new Chart(this.chartOptions);
}
}

Expected Results:

Thank You…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.