Highcharts with angular2 and SystemJS Setup

Question

had a tough time trying to get ng2-highcharts and angular2 to work nicely together.

what I have is;

import * as Highcharts from 'highcharts';
window['Highcharts'] = Highcharts;  
bootstrap(AppComponent);

SystemJS Config;

  map: {
    "highcharts": "node_modules/highcharts/highcharts.js",
    "ng2-highcharts": "node_modules/ng2-highcharts",

  }

as you can see, this is quite a hack but its the only way I could get it working - when I remove the manual window assignment, I get

ReferenceError: Highcharts is not defined
    at Ng2Highcharts.Object.defineProperty.set

So my question is, surely there is a better way? Any ideas?

I am using it like so;

import { Component, OnInit } from 'angular2/core';
import { Ng2Highcharts } from 'ng2-highcharts/ng2-highcharts';

@Component({
    selector: 'component',
    styleUrls: ['.comp.css'],
    templateUrl: '.comp.html',
    directives: [Ng2Highcharts]
})

Thanks

Answer 1

I have slightly modified the original implementation of ng2-highcharts I retreived few months ago to overcome some issues (I had to use jQuery - probably the most current version of the package does not need any twick any more). In any case this is the code of the directive I use

/// <reference path="../../typings/highcharts/highcharts.d.ts" />

declare var jQuery: any;

import {Directive, ElementRef, Input} from 'angular2/core';

@Directive({
    selector: '[ng2-highcharts]'
})
export class Ng2Highcharts {
    hostElement: ElementRef;
    chart: HighchartsChartObject;

    constructor(ele: ElementRef) {
        this.hostElement = ele;
    }

    @Input('ng2-highcharts') set options(opt:HighchartsOptions) {
        if(!opt) {
            console.log('No valid options...');
            console.log(opt);
            return;
        }
        if(opt.series || opt.data) {
            let nativeEl = this.hostElement.nativeElement;
            let jQ = jQuery(nativeEl);
            this.chart = jQ.highcharts(opt);
        } else {
            console.log('No valid options...');
            console.dir(opt);
        }
    }
}

In index.html I have

System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          },
          ng2Highcharts: {
            format: 'register',
            defaultExtension: 'js'
          },
.....
.....
}})

and

<script src="./lib/jquery/dist/jquery.js"></script>
<script src="./lib/highcharts/highstock.js"></script>
<script src="./lib/highcharts/modules/exporting.js"></script>
<script src="./lib/highcharts/highcharts-more.js"></script>

In the components that need to use the directive the html code looks like the following:

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

chartOptions are created with code like this

createNewchartOptions() {
        return {
            title: {text: "Performance vs Benchmark (" + this.periodText + ")"},
            rangeSelector: {
                selected: 4},
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';}
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'}]
            },
            plotOptions: {
                series: {
                    compare: 'percent'}
            },
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2}
        };
    }

Last thing you need to do is to set the series in the chartOptions (I do not put code since too linked to my app).

I hope this helps