How to use Highcharts regression plugin to plot a trend line using angular 8 wrapper

Question

I am trying to plot trendline in my spline plot using highcharts regression plugin. But I am not able to find any snippet showing how to import highcharts-regression plugin correctly in my angular component.

I have imported angular highcharts in my component as mentioned in below 2 lines.

import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

and in html:

 <highcharts-chart [Highcharts]="highcharts" [options]="chartOptions"
       [callbackFunction]="chartCallback"  [(update)]="updateFlag"  [oneToOne]="oneToOneFlag"
         style="width: 100%; height: 400px; display: block;">
     </highcharts-chart>

I have below mentioned highchart options used to plot my spline graph in my angular8 component.

chartOptions = {
    chart: {
      type: 'spline'
    },
    title: {
      text: 'With Outliers'
    },
    xAxis: {
      title: {text: 'Chunk Order'},
      tickInterval: 10,
      categories: [
                2,4,5,7,8
      ]
    },
    yAxis: {
      title: {
        text: 'Oil Pressure'
      }
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false,
          fillColor: '#f5bf42',
        }
      }
    },
    series: {
      name: 'oilpressure',
      lineColor: '#f5bf42',
      regression: true,
      /* regressionSettings: {
        name : 'oilpressure',
        type: 'linear',
        color: 'rgba(223, 183, 83, .9)',
        dashStyle: 'dash'
      }, */
    
      data: [345, 678,654,772,352]

    }
  };```

Answer 1

All you need to do is to install the highcharts-regression package, then import it and initialize it with highcharts (as you did with the exporting module).

import { Component } from "@angular/core";
import * as Highcharts from 'highcharts';

declare function require(name:string);
const HC_Regression = require('highcharts-regression');
HC_Regression(Highcharts);
...

Live demo:
https://stackblitz.com/edit/highcharts-angular-highcharts-regression?file=src/app/app.component.ts