Highcharts Angular Wrapper

Angular has become the JavaScript framework of choice for many developers. It offers many modern conveniences such as databinding, easy third party integrations, and overall less coding for developers. As a convenience to our customers, we wanted to ensure that using Highcharts in an Angular project was as easy as possible. We are therefore happy to present to you our official Highcharts Angular wrapper, which is free to use (please note that using Highcharts for commercial projects require a valid license).

Let’s take a quick look at the wrapper along with the included demo app.

Remark
Be sure you have node, npm, and Angular up to date. The following demo app was tested with:

• node 6.10.2+
• npm 4.6.1+/li>
• @angular/cli 1.0.1+/li>

Run the demo

The first thing to do is to open the terminal, create a folder to save the work, then clone or download the content of the following Github repository.

Run this command to install the dependencies npm install, and this command to start the demo npm start

The result should be as follows:

Explanations

Let’s see what’s going on here.

Browse to the directory for the demo code, then open the app.module.ts file:

Notice that the main component HighchartsChartComponent is added to the app module app.module.ts. It provides the interface between Angular and Highcharts.

import { HighchartsChartComponent } from 'highcharts-angular';
@NgModule({
  declarations: [
    HighchartsChartComponent,
    ...

To generate a chart with Highcharts, you need first to import the Highcharts module using the following command npm install highcharts --save, then add it to the app.component.ts file:
import * as Highcharts from 'highcharts';
Now, it is time to add the Highcharts-angular selector in the same file:

<highcharts-chart 
  [Highcharts]="Highcharts"

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

  [(update)]="updateFlag"
  [oneToOne]="oneToOneFlag"

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

The selector defines the HTML element, which is later changed by the wrapper, into a chart.

Notice the variables between the quotations such as "chartConstructor","chartOptions", etc. Those variables are options set in the export class AppCompoenent:

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

For more details about each option, click on the following link.
That’s all there is to it! Feel free to explore the code by setting up demos with different charts, and share your experience and questions in the comment area.