Angular Cli Usage

Starting a new project

First of all, make sure you have angular-cli installed globally:

npm install -g angular-cli

The versions used to test this wiki are:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/

Angular CLI: 1.5.0
Node: 8.7.0
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1
highcharts: ^6.0.2
ng2-highcharts: ^1.1.1
@types/highcharts: ^5.0.11

1. Create a new project: ng new my-chart-app
2. Enter the directory you've created: cd my-chart-app
3. Test the project: ng serve
4. Open the browser at http://localhost:4200

At this point you should see the message apps works!!!

Adding the dependencies to ng2-highcharts and its peer dependencies

5. At the console, add the libraries you need (if you are using Angular v2.x.x, use ng2-highcharts v0.6.x, if you are using Angular v4.x.x or v5.x.x, use ng2-highcharts v1.x.x):

npm install --save [email protected] [email protected]
npm install --save-dev @types/highcharts@^5.0.0

6. Change the build script to reference highcharts at .angular-cli.json

{
   //...
   "apps": [
      //...
      "scripts": [
        "../node_modules/highcharts/highcharts.js"
      ],
      //...
   ],
   //...
}

Using ng2-highcharts

7. Insert the dependency at app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Ng2HighchartsModule } from 'ng2-highcharts';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Ng2HighchartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

8. Insert the element into the view inside app.component.html:

<div style="text-align:center">
  <H1>NG2-Highcharts with Highcharts</H1>
  <div [ng2-highcharts]="chartOptions"></div>
</div>

9. Insert the chartOptions into app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  chartOptions = {
    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]
      }
    ]
  };
}

Result

In the browser you should see: NG2-Highcharts with Highcharts and a column chart just below it.