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

You could also try angular2-highcharts I implemented.

Answer 2

To install this library, install peer dependencies first:

$ npm install --save highcharts@^4.2.1

Also, make sure you install the typings for Highcharts:

$ npm install @types/highcharts --save

Then, install this library running:

$ npm install --save ng2-highcharts

app.module

import { Ng2HighchartsModule } from 'ng2-highcharts';

add Ng2HighchartsModule to @NgModule => imports

angular cli Add this JS files in script

"../node_modules/highcharts/highcharts.js",
    "../node_modules/highcharts/highcharts-more.js", 
    "../node_modules/highcharts/modules/exporting.js"

component file

import { Ng2Highcharts } from 'ng2-highcharts';


private chartData = {
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]
  }
]};

And the HTML

<div [ng2-highcharts]="chartData"></div>

Answer 3

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 4

I didn't tested yet but HighCharts has its official Angular library which seems to be actively maintained.