Ionic usage

Start a new project

(Tested with ionic v2.2.2 and ng2-highcharts v0.6.x)

1. install the ionic CLI and typings CLI to global npm: npm i -g ionic;
2. Start a sample project: ionic start myApp --v2;
3. Enter the project directory: cd myApp;
4. Install ng2-highcharts and highcharts: npm install [email protected] [email protected] --save;

Editing the project

1. Import the following code into src/pages/home/home.ts:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  chartData = {
    chart: {
      type: 'column'
    },
    xAxis: {
      categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    },
    series: [
      {
        name: 'NC',
        data: [7057, 6858, 6643, 6570, 6115, 107, 31, 635, 203, 2, 2]
      }, {
        name: 'OK',
        data: [54047, 52484, 50591, 49479, 46677, 33, 156, 947, 408, 6, 2]
      }, {
        name: 'KO',
        data: [11388, 11115, 10742, 10757, 10290, 973, 914, 4054, 732, 34, 2]
      }, {
        name: 'VALID',
        data: [8836, 8509, 8255, 7760, 7621, 973, 914, 4054, 732, 34, 2]
      }, {
        name: 'CHECK',
        data: [115, 162, 150, 187, 172, 973, 914, 4054, 732, 34, 2]
      }, {
        name: 'COR',
        data: [12566, 12116, 11446, 10749, 10439, 973, 914, 4054, 732, 34, 2]
      }
    ]
  };
  constructor(public navCtrl: NavController) {

  }

}

2. Add chart to src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div [ng2-highcharts]="chartData"></div>
</ion-content>

3. Add the Ng2HighchartsModule dependency to your project editing app.module.ts:

//...
import { Ng2HighchartsModule } from 'ng2-highcharts';
//...
  imports: [
    IonicModule.forRoot(MyApp),
    Ng2HighchartsModule
  ],
//...

4. The hack step. Add the following 2 lines to top of src/app/main.ts so ionic can embed highcharts correctly to your bundle:

import * as HC from 'highcharts';
window['Highcharts'] = HC;

5. Run ionic serve, open a browser and go to http://localhost:8000.