score:5

Accepted answer

You could also extract the wrap to a standalone function that will take Highcharts as its parameter. Then all you need to do is to import and initialize it with the Highcharts.

//customWrap.ts
export default function(Highcharts) {
  const H = Highcharts;
  H.wrap(H.Chart.prototype, "getCSV", function(proceed, useLocalDecimalPoint) {
    // Run the original proceed method
    let result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    result += '\n"My source 1","My source 2","My source 3"';
    return result;
  });
}

//app.component.ts
import { Component } from "@angular/core";
import * as Highcharts from 'highcharts';
import HC_exporting from 'highcharts/modules/exporting'
import HC_exportData from 'highcharts/modules/export-data';
import customWrap from './customWrap';

HC_exporting(Highcharts);
HC_exportData(Highcharts);
customWrap(Highcharts);
...

Live demo: https://stackblitz.com/edit/highcharts-angular-basic-line-1jommb?file=src/app/app.component.ts

score:0

OK, finally I manage to get the wrap method working for the getCSV function by adding this in my ngOnInit:

Highcharts.wrap(Highcharts.Chart.prototype, 'getCSV', function(proceed, useLocalDecimalPoint) {
      let result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      result += '\nHello world!';
      return result;
    });

Beware of two mistakes I made that cost me a couple of hours to find:

  1. Initially I pass Highcharts.chart.prototype as the first parameter (note the lower case in chart), this didn't raise any error on the client side, but it wasn't overriding the getCSV function.
  2. Make sure not to use array notation when defining the function you pass as third parameter, as that will change the scope of this and make your proceed.apply call to fail.

This code will fail:

Highcharts.wrap(Highcharts.Chart.prototype, 'getCSV', (proceed, useLocalDecimalPoint) => {
          // This will fail
          let result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
          return result;
        });

Related Query

More Query from same tag