How to add 3d Highcharts - Countour plugin in angular 8. Tried Multiple ways but still getting error

Question

I want to include contour plugin specific to highcharts to our angular project. Since there is no npm library found for this. I tried it as a wrapper, but still getting error as module not found. Can someone help me with that

Answer 1

Here you can find an example of how you could add and load a custom plugin/wrapper: https://stackblitz.com/edit/highcharts-angular-custom-plugin.

    // customPlugin.ts
    export default function(Highcharts) {
      const H = Highcharts;
      H.wrap(H.Chart.prototype, "showNoData", function(p, str) {
        ...
      });
    }

    // xxx.component.ts
    import customPlugin from "./customPlugin";
    customPlugin(Highcharts)

Highcharts-angular docs: https://github.com/highcharts/highcharts-angular#to-load-a-plugin.

If none of the above solutions will work for you, please reproduce the problem in the online editor so I can check what is not working and what could be done. Also, are you using the official highcharts-angular wrapper?

Answer 2

I have tried injecting the plugin 'customPlugin.ts' which contains contour code : https://github.com/paulo-raca/highcharts-contour/blob/master/highcharts-contour.js

import * as Highcharts from 'highcharts/highcharts';
import highcharts3D from 'highcharts/highcharts-3d';
import Heatmap from 'highcharts/module/heatmap';
import customPlugin from "./customPlugin";

highcharts3D(Highcharts);
customPlugin(Highcharts);

But got runtime error: " The requested series type does not exist.This error happens when setting chart.type or series.type to a series that isn't defined in HighCharts. A typical reason may be that the module or extension where the series type is defined isn't included. For example in order to create an arearange series , the highcharts-more.js file must be loaded."

I see that "Heatmap" seriesType is expected in the contourPlugin , so tried below code:

highcharts3D(Highcharts);
Heatmap(Highcharts);
customPlugin(Highcharts);

Still getting the same error .Please provide if you have any suggestions.