Complete guide for using Highcharts and Highstock charts in Angular/Ionic 2, 3

Published in

_devblogs

5 min readMar 3, 2018

Introduction

Using graphs/charts is the best way to represent the data. As it is more user friendly , and other operations like comparisons, analytics can be performed. In Javascript there are many libraries provided for graphs/charts “Thanks to Open Source” . Libraries like Charts.js , Highcharts.js , Fusion-charts.js etc.. are pretty good open source libraries for doing such stuff.

But as we know data is increasing at a very big pace , we need a library through which we can show large set of data in small code. This facility is provided by High-charts library. In this tutorial, we will learn to draw high-charts and high stock charts using Angular 2 and Ionic 2.

Prerequisites

Before proceeding further , you must have installed Angular-cli , Ionic , Cordova. We will be creating an ionic 2 app which will show case High-charts and high-stock charts. So get ready … 😎

⚠️ In this tutorial, I have ionic 2 (Ionic CLI) : 3.16.0 and Cordova ( 7.0.0 ) installed. Also, all the code written below is tested on Android Platform only. On other platforms, may be there will be some changes in the code.

Lets do some code now… 🤓

⚠️ First we will see how to implement high charts and then we will use high stock charts as both are lil different to implement.

High-Charts

To implement high charts we need to install the following plugin:

npm install angular2-highcharts --save

Now Add this module you installed to App.module.ts file as follows :

import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'Highcharts';// Inside imports block of app.module.ts add following:imports: [BrowserModule,
IonicModule.forRoot(MyApp), 
ChartModule.forRoot(highcharts)]

While installing angular2-highcharts module, ‘Highcharts’ module installed itself as it is dependency to angular2-highcharts module. So, basically angular2-highcharts module is wrapper around the core “ Highcharts ” module which helps us to use high-charts in angular 2.

Now close the app.module.ts file and go to the home page in pages directory

As we have imported ChartModule we can use a chart element in our HTML page as follows:

<ion-content><chart [options] = "chartOptions" style="display: block" type = "chart"> </chart></ion-content>

This chart element has an “options” property where we will bind our chart

In home.ts file we need to declare chartOptions to render it on our HTML page as follows:

import { Component } from '@angular/core';import { NavController } from 'ionic-angular';@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage { chartOptions : any; constructor(public navCtrl: NavController) {  this.chartOptions = {   chart: {    type: 'bar'   },   title: {    text: 'Fruit Consumption',    style: {      color : "#ff0000"    }   },  xAxis: {   categories: ['Apples', 'Bananas', 'Oranges']  },  yAxis: {   title: {    text: 'Fruit eaten'   }  },  series: [{   name: 'Jane',   data: [1, 0, 4]  }, {    name: 'John',   data: [5, 7, 3]  }]  } }}

Here in constructor we defined the chartOptions having properties like type of chart is bar chart, x-axis and y-axis.

The output of this chart will be as follows:

High-Stock Charts

Using High-stock charts in Ionic 2/ angular 2 is bit tricky and different as this library in particular is created for javascript only and Ionic2/Angular2 supports typescript, So we need to follow some other steps for creating high-stock charts.

⚠️ In this section of high-stock charts we are not using angular2-highcharts plugin, so feel free to remove this plugin or try this in new app.

As we know the highstock charts does not support typescript directly, but there is a way to use it here.. 😉

Open up the index.html file of your project and add following scripts for highstock.js

<!-- Implementing High Stock Charts --><script src="https://code.highcharts.com/stock/highstock.js"></script><script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

These scripts are used to import highstock library inside our project

Now go to home.html file and here we will be adding a div to show the chart as follows:

<ion-content padding><div id="container" style="height: 400px"></div></ion-content>

This id “ container ” will be used to bind the highstock chart here…

Open the home.ts file and add the following to the code:

import { Component } from '@angular/core';import { NavController } from 'ionic-angular';declare var Highcharts : any;@Component({selector: 'page-home',templateUrl: 'home.html'})export class HomePage {constructor(public navCtrl: NavController) { }ngAfterViewInit ( ) {// create the chartHighcharts.stockChart('container',{chart: {alignTicks: false},rangeSelector: {selected: 1},title: {text: 'AAPL Stock Volume'},series: [{type: 'column',name: 'AAPL Stock Volume',data: [[1298851200000,100768479],[1298937600000,114032163],[1299024000000,150647189],[1299110400000,125196764],[1299196800000,113316483],[1299456000000,136530149],[1299542400000,89078955],[1299628800000,113349033],[1299715200000,126972055],[1299801600000,117770016]],dataGrouping: {units: [['week', // unit name[1] // allowed multiples], ['month',[1, 2, 3, 4, 6]]]}}]});}}

As you can see above the data is to be in the form of JSON object in which 1 field is for timestamp which is added by using getTime(), and other is the corresponding value to that time.

And we have declared Highcharts as any because it has no specific datatype and stockchart is the property we implemented from using highstock.js file inside our index.html file.

⚠️ Remember use this highstock function inside ngAfterViewInit() function , as sometimes it takes time to load script in project and it causes error of uncaught Promise . So ngAfterViewInit will only render when the whole page will get ready.

The output will be: