Incorporating Highcharts in Angular

Many times in our applications, we need to include statistics and charts to display data in pictorial format which makes it easy to read, interpret and derive value from large amounts of data. Surely we would want to implement data in the form of variety of these charts like the more common ones including Bar chart, Pie chart, etc. and the not so common ones like Funnel, Sunburst etc.

Highcharts are a great way to set up interactive charts in your application. In this blog, we will see how we can implement a variety of charts using highcharts in our Angular application.

As they say, “Let’s make our DATA come ALIVE!

Using angular2-highcharts

We will achieve this using angular2-highcharts.

Installation

Let’s get started by installing the prerequisites.

npm install angular2-highcharts --save

Importing in Application

Approach I :

Include the required modules in your module(I am using chart.module.ts) to use charts in the specific module.

import { ChartModule } from 'angular2-highcharts';
@NgModule({
    imports: [
      BrowserModule, 
      ChartModule.forRoot(require('highcharts'))
    ],
    declarations: [ChartsDemoComponent]
})
export class ChartsModule {}

In you want to use advanced charts like Sunburst, Funnel or Range selector capabilities, you may need to import specific modules as below.

ChartModule.forRoot(require('highcharts'), require('highcharts/highstock'))
Approach II :

In case you face issues with ‘require’ while building the angular code, you can also use the below approach to import and include it as a service factory  and list it as a provider.

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as highcharts from 'highcharts';

import * as highchartsFunnel from 'highcharts/modules/funnel';
import * as highchartsSunburst from 'highcharts/modules/sunburst';
import * as highstocks from 'highcharts/modules/stock';
export function highChartsFactory() {
constmodules= [
highchartsFunnel,
highchartsSunburst,
highstocks
];

for (constmoduleofmodules) {
module(highcharts);
}
returnhighcharts;
}
@NgModule({
    imports: [
      BrowserModule,       
      ChartModule
    ],
    declarations: [ChartsDemoComponent],
    providers: [
    {        
        provide:HighchartsStatic,
        useFactory:highChartsFactory
     }
})
export class ChartsModule {}

Defining charts

Once you have successfully imported highcharts in your module, you can easily define the chart of your choice.

We will see one example in this blog with a combination chart(line and bar).

line.component.html

The html of the component(for any chart) will be as simple as below:

<chart [options]="options" ></chart>
The options which you set will determine the type of chart, the data series, the size of the chart, and various other features of the chart which you can explore further.
line.component.ts

The linechart.component.ts will be something like below:

import { Component, OnInit} from '@angular/core';
@Component({
selector:'linechart',
templateUrl:'./linechart.component.html'
})
export class LineChartComponent implements OnInit {
chart:any;
options:any;
//set the series data here it will be valueset like [(x1,y1),(x2,y2),(x3,y3)...] to set the values //for x and y axis
series :any[] = [('2014-09-15',12), ('2014-09-16', 10),('2014-09-17',15)]//sample
constructor() {
}
ngOnInit() {
this._setOptions();
}
_setOptions() {
this.options= {
title: { text:'My chart' },
chart: {//to set size of chart
width:this.data.width,
height:this.data.height
},
xAxis: {
type:'datetime',
dateTimeLabelFormats: {
hour:'%l hr',
day:'%a',
month:'%b',
year:'%y'
}
},
series:[{
name:'Line chart',
type:line,
data: this.series
},
{
name:'Bar chart',
type:column,
data: this.series
}]
}
}
By using variety of options provided by highcharts, you can present your data in many beautiful ways.

Happy HighCharting!!

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 )

w

Connecting to %s