CODEWITHSUNDEEP
angulartypescripthighcharts
Strikers
Strikers

Reputation: 4776

How to import highchart-more into angular 4 project

In my angular 4 project I'm using highcharts for a combination chart of line column and a area range chart.

I'm using the following npm package for highcharts. https://github.com/highcharts/highcharts

here is how I imported the highcharts module in the typescript component

import { chart } from 'highcharts';

But my chart is dependent on highcharts-more.js file. this file is present in node-modules > highcharts folder.

whenever I'm using the area range chart i'm gettin error #17 which is because highcharts-more file missing.

How to import this highcharts-more module in to my component.

I tried require('highcharts-more') but it is of no use. Because I'm getting error with require as well.

Upvotes: 2

Views: 2752

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

Check this gist: https://gist.github.com/jon-a-nygaard/f22ade93209277eea5b57c0f6ca51ea7

This should work:

import Highcharts from 'highcharts'
import addMore from "highcharts/highcharts-more";

addMore(Highcharts)

Gist taken from from github issue: https://github.com/highcharts/highcharts/issues/5638

Alternative solution:

import * as Highcharts from 'highcharts'
import * as HighchartsMore from 'highcharts/highcharts-more.src.js'
HighchartsMore(Highcharts)

Upvotes: 3

filipbarak
filipbarak

Reputation: 1905

You could just use an Angular wrapper for Highchart, such as

https://www.npmjs.com/package/angular-highcharts

Or if you are using Angular v4.0 then use 

https://github.com/cebor/angular-highcharts/blob/4/README.md

Same repo, but the instructions are for Angular v4

Upvotes: 0

Related Questions