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

Added this to package.json:

"angular2-highcharts": "^0.3.3",
"highcharts": "^5.0.0",

Added this on main.module.ts file:

import { ChartModule } from 'angular2-highcharts';

Added this on main.module.ts in @NgModule imports section

imports: [ // import Angular's modules    
    ChartModule
],

Added this in vendor.ts file:

//Angular2-highcharts
import { Highcharts } from 'angular2-highcharts';
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

Added this on the chart.component.ts file

import { Highcharts } from 'angular2-highcharts';

declare this on inside the chart.component class code:

options: HighchartsOptions;
chartData: any = [];

Add this code in the method that binds the data to the chart:

this.options = {
      chart: { type: 'spline' },
      title : { text : 'chart' },
      xAxis: {
          type: 'datetime'
      },
      series: [{
        name: "name",
        data: this.chartData
      }]
    };

Added this on the chart.component.html page: