angular - How to import highcharts-more

Question

I would like to use the spiderweb chart from highcharts, which requires me to import highcharts-more, but I cannot figure out how to do that. Currently, this is how I've added highcharts to my project, from app.module.ts:

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import * as Highcharts from 'highcharts/highstock';

imports: [
    ChartModule
]

providers: [{
    provide: HighchartsStatic,
    useValue: Highcharts
}],

When I try to import it like this:

import * as HighchartsMore from 'highcharts/highcharts-more';

I get the following error:

Module '"c:/pdws-view-v2/node_modules/@types/highcharts/highcharts-more"' resolves to a non-module entity and cannot be imported using this construct.

Any ideas?

Answer 1

You don't need to use an external module to use highcharts or any of the extension packages in your Angular app. All you need to do npm install --save highcharts and then in your component along with the other imports include:

// HIGHCHARTS
import * as Highcharts from 'highcharts';
declare var require: any;
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/modules/heatmap')(Highcharts);
require('highcharts/modules/treemap')(Highcharts);
require('highcharts/modules/funnel')(Highcharts);
let chartHolder;

and example usage:

ngOnInit() {
  chartHolder = Highcharts.chart('container', newOptions);
}

and you can update the chart options:

updateChart(newOptions) {
  chartHolder.update(newOptions);
}