Extending highcharts in Angular

user_1299317 0
Viewed 645

I'm using highcharts in my Angular project and need to do some manipulation on the export CSV functionality.

I've found an thread here in stackoverflow that seems to explain what I require to do:

Add Source to Highcharts Export CSV

But unfortunately it is implemented using pure javascript and I'm unable to find out how I'm supposed to extend Highcharts inside an Angular component.

This is what I want to know how to implement in Angular:

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

Here's the working example in JSFiddle

angular highcharts
2 Answers

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

user_122851850

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;
        });
user_12993170
Related