@stackline/angular-highcharts

A maintained Angular 2 wrapper for Highcharts, Highstock, and Highmaps applications, with standard chart rendering, constructor switching, module registration, directive event outputs, native chart instance access, realtime data demos, and Angular-versioned release lines.

Documentation & Live Demos | Angular 2 Demo | npm | Issues | Repository | Community Discussions

Angular 2 release: 2.0.0

Credits: Original Angular Highcharts wrapper lineage by Eugene Gluhotorenko. Current Stackline maintenance, Angular release-line packaging, docs, live tests, publishing, and repository stewardship by Alexandro Paixao Marques.

Why this library?

@stackline/angular-highcharts keeps the early Angular Highcharts wrapper API alive while making it usable in a maintained, versioned Stackline package line.

The goal is not to hide Highcharts. The package stays thin: your application still owns the real Highcharts options object, the Highcharts constructor choice, module registration, event handling, and native chart instance. The wrapper gives Angular templates a stable <chart> component, Angular event outputs, axis/series/point directives, and release families aligned to Angular majors.

The Angular 2 package family is 2.0.0 and is intended for Angular 2.x applications. The live validation app for this line uses a real Angular 2 project, renders static chart examples, renders realtime market examples, and validates that dynamic charts update existing Highcharts instances instead of blinking through full object recreation.

Features

Table of Contents

1. Angular Version Compatibility
2. Installation
3. Setup
4. Basic Usage
5. Constructor Switch
6. Highcharts Modules
7. Events and Directives
8. Native Chart Instance
9. Dynamic and Realtime Data
10. Common Chart Types
11. API Surface
12. Wrapper Capabilities
13. License

Angular Version Compatibility

Each package family targets one Angular major. Keep the package major aligned with the Angular major used by your application.

Installation

npm install @stackline/angular-highcharts@2.0.0 highcharts --save-exact

The package declares highcharts as a peer dependency so your application can choose the Highcharts version and modules it needs.

Setup

1. Import the module

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

declare var require: any;

@NgModule({
  imports: [
    BrowserModule,
    ChartModule.forRoot(require('highcharts'))
  ]
})
export class AppModule {}

Basic Usage

1. Render a chart

<chart [options]="options"></chart>

2. Keep options in the component

options = {
  chart: { type: 'line' },
  title: { text: 'Simple chart' },
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] },
  yAxis: { title: { text: 'Revenue' } },
  series: [
    { name: 'Orders', data: [29.9, 71.5, 106.4, 129.2] }
  ]
};

Constructor Switch

Use the type input when the chart should be created with another Highcharts constructor.

<chart [type]="'StockChart'" [options]="stockOptions"></chart>

stockOptions = {
  rangeSelector: { selected: 1 },
  title: { text: 'BNBUSDT candles' },
  series: [
    {
      type: 'candlestick',
      name: 'BNBUSDT',
      data: []
    }
  ]
};

Common constructor values:

Highcharts Modules

Register Highcharts modules through ChartModule.forRoot(...). The wrapper calls each module with the Highcharts static object before charts are created.

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

declare var require: any;

@NgModule({
  imports: [
    BrowserModule,
    ChartModule.forRoot(
      require('highcharts'),
      require('highcharts/highcharts-more'),
      require('highcharts/modules/solid-gauge'),
      require('highcharts/modules/heatmap'),
      require('highcharts/modules/treemap'),
      require('highcharts/modules/funnel')
    )
  ]
})
export class AppModule {}

The live test matrix covers examples for line, spline, area, areaspline, column, bar, stacked column, pie, donut, scatter, bubble, combination, polar, gauge, solid gauge, heatmap, treemap, funnel, 3D column, StockChart, map-like charts, and no-data states.

Events and Directives

The wrapper exposes Angular outputs for Highcharts chart, series, point, and axis event families.

<chart
  [options]="directiveOptions"
  (create)="onChartCreate($event)"
  (load)="record('chart load')"
  (redraw)="record('chart redraw')"
  (selection)="record('chart selection')"
>
  <series
    (click)="record('series click')"
    (legendItemClick)="record('legend click')"
  >
    <point
      (click)="record('point click')"
      (mouseOver)="record('point hover')"
    ></point>
  </series>

  <xAxis (setExtremes)="record('xAxis extremes')"></xAxis>
  <yAxis (setExtremes)="record('yAxis extremes')"></yAxis>
  <zAxis (afterSetExtremes)="record('zAxis extremes')"></zAxis>
  <colorAxis (setExtremes)="record('colorAxis extremes')"></colorAxis>
</chart>

events: string[] = [];

onChartCreate(chart: any) {
  this.record('chart created with ' + chart.series.length + ' series');
}

record(message: string) {
  this.events.unshift(new Date().toLocaleTimeString() + ' - ' + message);
  this.events = this.events.slice(0, 8);
}

Native Chart Instance

Use (create) to keep the native Highcharts instance. This is the right path for realtime dashboards because it lets you update series progressively instead of recreating the full options object.

<chart [options]="options" (create)="saveChart($event)"></chart>

chart: any;

saveChart(chart: any) {
  this.chart = chart;
}

addPoint(value: number) {
  if (!this.chart || !this.chart.series.length) {
    return;
  }

  this.chart.series[0].addPoint(value, true, false);
}

replaceSeries(data: number[]) {
  if (!this.chart || !this.chart.series.length) {
    return;
  }

  this.chart.series[0].setData(data, true, false);
}

Dynamic and Realtime Data

The Angular 2 live test includes a realtime market screen:

• REST candle history.
• WebSocket candle updates.
• Light and dark chart modes.
• StockChart candlestick rendering.
• Dynamic ticker charts that update existing Highcharts series.
• A Mask API route through api-b.alexandro.net for networks that block direct Binance domains.

The example still uses public Binance market data, but browser traffic can be routed through a mask API so corporate firewalls do not block the demo domain.

restUrl = 'https://api-b.alexandro.net/api/v3/klines?symbol=BNBUSDT&interval=1s&limit=300';
wsUrl = 'wss://api-b.alexandro.net/ws/bnbusdt@kline_1s';

When data changes often, prefer updating the existing chart instance:

updateCandles(ohlcData: any[], volumeData: any[]) {
  if (!this.chart) {
    return;
  }

  this.chart.series[0].setData(ohlcData, false, false);
  this.chart.series[1].setData(volumeData, false, false);
  this.chart.redraw();
}

Common Chart Types

Use normal Highcharts options. The wrapper does not invent a second chart configuration language.

columnOptions = {
  chart: { type: 'column' },
  title: { text: 'Monthly sales' },
  xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr'] },
  yAxis: { title: { text: 'Sales' } },
  series: [
    { name: 'Online', data: [12, 18, 24, 31] },
    { name: 'Retail', data: [8, 13, 19, 22] }
  ]
};

pieOptions = {
  chart: { type: 'pie' },
  title: { text: 'Share by channel' },
  series: [
    {
      name: 'Share',
      data: [
        ['Organic', 42],
        ['Paid', 28],
        ['Referral', 18],
        ['Direct', 12]
      ]
    }
  ]
};

API Surface

<chart> inputs

<chart> outputs

Directive outputs

Wrapper Capabilities

License

MIT