How to use highcharts with angular 5?

Question

Is there any way to use highcharts.js with angular2 ?Is there any option available instead of highcharts?

Answer 1

With usage of official highcharts module only (w/o angular2-highcharts and other and even @types/highcharts)

npm install --save-dev highcharts

import * as HC from 'highcharts';
...
export class MainComponent implements OnInit, AfterViewInit {
...
ngAfterViewInit() {
  let chartOptions = {
  ...
    chart: {
      renderTo: 'chartPanel', // need to have div #chartPanel in template
      ...
    }
  }
  this.chartInstance = new HC.Chart(chartOptions);
}

this.chartInstance will have all highcharts methods like addSeries, reflow, redraw etc.

Answer 2

As of October 2018:

angular-highcharts is the new kid on the block and has overtaken angular2-highcharts in popularity.

angular-highcharts is an Angular directive based implementation of highcharts and ATTOW requires Angular 7 (which was released very recently)

I have no affiliation to either library.

Answer 3

I know this question is a bit stale, but is one of the first hits for angular2+highcharts queries... It's pretty simple and straight forward to get highcharts working. Here is a plunker example, https://plnkr.co/edit/8ccBrP?p=preview.

Here is the main logic:

import {
    Component,
    ElementRef,
    AfterViewInit,
    OnDestroy,
    ViewChild
} from '@angular/core';

const Highcharts = require('highcharts/highcharts.src');
import 'highcharts/adapters/standalone-framework.src';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <div #chart></div>
        </div>
    `
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('chart') public chartEl: ElementRef;

  private _chart: any;

  public ngAfterViewInit() {
    let opts: any = {
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            name: 'Tokyo',
            data: [
                7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                26.5, 23.3, 18.3, 13.9, 9.6
            ]
        }]
    };

    if (this.chartEl && this.chartEl.nativeElement) {
        opts.chart = {
            type: 'line',
            renderTo: this.chartEl.nativeElement
        };

        this._chart = new Highcharts.Chart(opts);
    }
  }

  public ngOnDestroy() {
    this._chart.destroy();
  }
}

Answer 4

PrimeNG charts can be an alternative. http://www.primefaces.org/primeng/