Highcharts Angular

Official minimal Highcharts wrapper for Angular

Getting started
Options details
Highcharts instance details
Demo app
1. Play with the app
2. Files to play with

Getting started

General prerequisites

Make sure you have node, NPM and Angular up to date. Tested and required versions:

node 6.10.2+
npm 4.6.1+
@angular/cli 1.0.1+

Installing

Get package from NPM in your Angular app:

npm install highcharts/highcharts-angular

In your app.module.ts add the HighchartsChartComponent:

...
import { HighchartsChartComponent } from 'highcharts-angular';

@NgModule({
  declarations: [
    HighchartsChartComponent,
    ...

In a component that will be building your Highcharts charts you will need to import Highcharts first, so in system console, while in your Angular app:

npm install highcharts --save

Next, in the app.component.ts, in top lines where other imports are add another one for Highcharts:

import * as Highcharts from 'highcharts';

In the same file (app.component.ts) add to the template Highcharts-angular component selector highcharts-chart:

<highcharts-chart 
  [Highcharts]="Highcharts"

  [constructorType]="chartConstructor"
  [options]="chartOptions"
  [callbackFunction]="chartCallback"

  [(update)]="updateFlag"

  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

Right side names, in double quotes, are just names of variables you are going to set next, so you could name then whatever you like. Style at the bottom of the selector is optional, but browsers do not know how to display <highcharts-chart>, so you should set some styles.

In the same file (app.component.ts) all variables should be set in export class AppComponent { like:

export class AppComponent {
  Highcharts = Highcharts; // required
  chartConstructor = 'chart'; // optional string, defaults to 'chart'
  chartOptions = { ... }; // required
  chartCallback = function (chart) { ... } // optional, defaults to null
  updateFlag = false; // optional
  ...

Used options are explained below.

Hello world demo

To create a simple demo start with installing.

Next for app.component.ts's HTML template use:

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="chartOptions"

  style="width: 100%; height: 400px; display: block;"
></highcharts-chart>

and export variables:

export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    series: [{
      data: [1, 2, 3]
    }]
  };
  ...

Build and run your Angluar app to see a basic line chart.

Options details

[Highcharts]="Highcharts"

The option is required. This is a Highcharts instance with required core and optional modules, plugin, maps, wrappers and set global options using setOptions. More detail for the option in the next documentation section.

[constructorType]="chartConstructor"

The option is optional. This is a string for constructor method. Possible values:

'chart' - for standard Highcharts constructor - for any Highcharts instance, this is default value
'stockChart' - for Highstock constructor - Highstock is required
'mapChart' - for Highmaps constructor - Highmaps or map module is required

[options]="chartOptions"

The option is required. Possible chart options could be found in Highcharts API reference. Minimal working object that could be set for basic testing is { series:[{ data:[1, 2] }] }.

[callbackFunction]="chartCallback"

The option is optional. A callback function for the created chart. First argument for the function will hold the created chart. Default this in the function points to the chart.

[(update)]="updateFlag"

The option is optional. A boolean to trigger update on a chart as Angular is not detecting nested changes in a object passed to a component. Set corresponding variable (updateFlag in the example) to true and after update on a chart is done it will be changed asynchronously to false by Highcharts-angular component.

Highcharts instance details

This is a Highcharts instance optionally with initialized modules, plugins, maps, wrappers and set global options using setOptions. The core is required.

Core

As core you could load Highcharts, Highstock or Highmaps.

For Highcharts:

import * as Highcharts from 'highcharts';

For Highstock:

import * as Highcharts from 'highcharts/highstock';

For Highmaps:

import * as Highcharts from 'highcharts/highmaps';

or as Highcharts with map module:

import * as Highcharts from 'highcharts';
import * as HC_map from 'highcharts/modules/map';
HC_map(Highcharts);

To load a module

A module is a Highcharts official addon. After Highcharts is imported using Highcharts, Highstock or Highmaps use require and initialize each module on the Highcharts variable.

import * as Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);

This could be done without require, but the initialization is still needed.

import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

To load a plugin

A plugin is a third party/community made Highcharts addon (plugins are listed in the Highcharts plugin registry). First, make sure that a plugin support loading over NPM and load the required files. In example Custom-Events supports NPM loading, so after installing the package you could initialize it like:

import * as Highcharts from 'highcharts';
import * as HC_customEvents from 'highcharts-custom-events';
HC_customEvents(Highcharts);

If a plugin doesn't support loading through NPM you could treat it as a wrapper - see instructions below.

To load a map for Highmaps

A map is JSON type file containing mapData code used when a chart is created. Download a map from official Highcharts map collection in Javascript format or use a custom map and add it to your app. Edit the map file, so it could be loaded like a module by adding to beginning and end of a file code below:

(function (factory) {
	if (typeof module === 'object' && module.exports) {
		module.exports = factory;
	} else {
		factory(Highcharts);
	}
}(function (Highcharts) {

...
/* map file data */
...

}));

In case of using a GeoJSON map file format you should add the above code and additionally, between the added beginning and the map file data, the below code:

Highcharts.maps["myMapName"] =

Where "myMapName" is yours map name that will be used when creating charts. Next, you will be loading a local .js file, so you should add in tsconfig.json in your app allowJs: true:

...
"compilerOptions": {
    "allowJs": true,
    ...

The map is ready to be imported to your app. Use require instead of import to prevent TS5055 errors.

import * as Highcharts from 'highcharts/highmaps';
require('./relative-path-to-the-map-file/map-file-name')(Highcharts);

Where relative-path-to-the-map-file should be relative (for the module importing the map) path to the map file and map-file-name should be the name of the map file.

The file should be placed in a directory that is not checked by typeScript. See example in this repository:

config in 'tsconfig.json'
map file in 'js' directory

To load a wrapper

A wrapper is a custom extension for Highcharts. To load a wrapper the same way as a module you could save it as a Javascript file and edit it by adding to beginning and end of a file same code as for a map:

(function (factory) {
	if (typeof module === 'object' && module.exports) {
		module.exports = factory;
	} else {
		factory(Highcharts);
	}
}(function (Highcharts) {

...
/* wrapper code */
...

}));

Next, you will be loading a local .js file, so you should add in tsconfig.json in your app allowJs: true:

...
"compilerOptions": {
    "allowJs": true,
    ...

The wrapper is ready to be imported to your app. Use require instead of import to prevent TS5055 errors.

import * as Highcharts from 'highcharts';
require('./relative-path-to-the-wrapper-file/wrapper-file-name')(Highcharts);

Where relative-path-to-the-wrapper-file should be relative (for the module importing the wrapper) path to the wrapper file and wrapper-file-name should be the name of the wrapper file.

The file should be placed in a directory that is not checked by typeScript. See example in this repository:

config in 'tsconfig.json'
map file in 'js' directory

To use `setOptions`

The best place to use setOptions is afer your Highcharts instance is ready and before Highcharts variable is set in the main component. Example:

import * as Highcharts from 'highcharts/highstock';
import * as HC_map from 'highcharts/modules/map';

HC_map(Highcharts);

Highcharts.setOptions({
  title: {
    style: {
      color: 'orange'
    }
  }
});

...

export class AppComponent {
  Highcharts = Highcharts;

Demo app

Download the content of this github repository.

In system console, in main repo folder run:

npm install
npm start

This opens http://localhost:4200/ in your default browser with the app.

To open on a different port, for example 12345, use:

npm start -- --port 12345

Play with the app

Keep the console running and change some files - after a save the app will rebuild and refresh the localhost preview.

Files to play with

app.component.ts (in src\app)

Contains Angular main component that uses the chart component.

chart.component.ts (in src\app\chart)

Contains the chart component that creates Highcharts chart.

RatnadeepSimhadri/highcharts-angular

Highcharts Angular

Table of Contents

Getting started

General prerequisites

Installing

Hello world demo

Options details

Highcharts instance details

Core

To load a module

To load a plugin

To load a map for Highmaps

To load a wrapper

To use `setOptions`

Demo app

Play with the app

Files to play with

RatnadeepSimhadri/highcharts-angular

Highcharts Angular

Table of Contents

Getting started

General prerequisites

Installing

Hello world demo

Options details

Highcharts instance details

Core

To load a module

To load a plugin

To load a map for Highmaps

To load a wrapper

To use setOptions

Demo app

Play with the app

Files to play with

To use `setOptions`