using with angular 4

[AkanshaS]

How can we use this plugin with angular 4 ? I have tried to include this as a external javascript , but i get the issue Highcharts not defined.

[phpepe]

Not offical support for angular yet. Are you using angular-highcharts ? May be you can find the way (by checking how other highcharts plugins codebase) but probably will require a small refactor. This refactor Its on my plan, I need to make it work for angular2.

2017-12-04 11:30 GMT-03:00 AkanshaS notifications@github.com:

How can we use this plugin with angular 4 ? I have tried to include this as a external javascript , but i get the issue Highcharts not defined.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/streamlinesocial/highcharts-regression/issues/63, or mute the thread https://github.com/notifications/unsubscribe-auth/AB_TLut0gAoYBGGCX3bJ875baRY92QGpks5s9AIZgaJpZM4Q0vRu .

[tmofardin]

I managed to get it working with Angular 4. Just put the code in service and call it when you know that Highcharts is loaded. I call it only when I need the plugin. You will also have to modify the code a little to support Typescript syntax.

1. In service, declare service function and put the plugin code inside:

export declare let require: any;
const Highcharts = require('highcharts');

public enableRegressPlugin()
  {
// plugin code here
    (function (H: any)
    {      
      H.wrap(H.Chart.prototype, 'init', function (proceed)
      {
        var series = arguments[1].series;
...

You se here that you have to declare H argument as type any. I also had to declare some variables further in code to support typescript.

2. In component, just call enableRegressPlugin() before initializing chart.

   private drawGraph()
   {
   this.hcUtility.enableRegressLinePlugin();
   let seriesArray: any = [
     {                
       name: this.scatterData.name,
       color: 'rgba(223, 83, 83, 0.5)',
       data: this.scatterData.data,
       regression: this.showLinearRegressionLine,
       regressionSettings: {
         type: 'linear',
         color: 'rgba(0, 0, 0, 0.5)',
         name: "Trendline: %eq, R²: %r2"
       }
     }
   ...