CODEWITHSUNDEEP
javascripthighchartsangular
Zigmas
Zigmas

Reputation: 335

How to add highcharts-more.src.js to an angular2 project?

I'm mapping highcharts-more to the system variable:

'highcharts-more': 'node_modules/highcharts/highcharts-more.src.js'

However it constantly gives me an error of:

Error in dev/process/templates/detail.template.html:40:33
ORIGINAL EXCEPTION: Error: Highcharts error #17: www.highcharts.com/errors/17

Does anyone has an idea how I could fix it so I could use boxplot type of chart?

Upvotes: 0

Views: 1887

Answers (5)

Yashpal S
Yashpal S

Reputation: 319

I was facing the same problem and resolved using below line of code in my component class:

const Highcharts = require('highcharts');
require('highcharts/highcharts-more')(Highcharts);

and below line of code in SystemJs.Config.js

'highcharts/highcharts-more': "npm:highcharts/highcharts-more.js"

Upvotes: 0

Ke Wang
Ke Wang

Reputation: 33

You can do the following:

declare var require: any;
var Highcharts = require('highcharts');
require('highcharts/highcharts-more.js')(Highcharts);
export { Highcharts };

Upvotes: 1

witold-gren
witold-gren

Reputation: 173

systemjs.config.js

var  map = {
   ...
   'angular2-highcharts':        'node_modules/angular2-highcharts',
   'highcharts/highstock.src':   'node_modules/highcharts/highstock.js',
   'highcharts/highcharts-more.js': 'node_modules/highcharts/highcharts-more.js',
   ...
}

my.component.ts

import {CHART_DIRECTIVES} from 'angular2-highcharts';
import {Highcharts} from 'angular2-highcharts';


require('highcharts/highcharts-more.js')(Highcharts);


@Component({
   ...
})
export class CompareMeasureComponent implements OnInit {
   ...
}

it's work :)

Upvotes: 3

Zigmas
Zigmas

Reputation: 335

I have spent quite some time on this one. I finally found an answer in https://github.com/gevgeny/angular2-highcharts/issues/21

While I'm using angular2-highcharts package, there has to be a line of requirement included into Highcharts.js file. 

require('../../highcharts/highcharts-more.js')(Highcharts);

This solved my issue.

Upvotes: 1

Emre Bolat
Emre Bolat

Reputation: 4552

Highcharts #17 error means, your mapping did not work and highcharts-more.js did not load correctly. Try this;

'highcharts-more': 'http://code.highcharts.com/highcharts-more.js'

Upvotes: 0

Related Questions