Uncaught TypeError: e.doDrilldown is not a function - Highcharts

Question

I am using highcharts in my react project. I have imported highcharts in my module. The expected behavior is to be able to use multiple instances of drilldown.

The exception raised e.doDrilldown is not a function when the drilldown actually works fine. This happens in my node environment, where each graph is in its own module and unaware of the other graphs present.

I tried adding the check to see if drilldown was already imported. I have tried using webpack to ensure the module is only loaded once. I currently use it in one file like this

import Drilldown from 'highcharts/modules/drilldown';
import Highcharts from 'highcharts/highmaps.src.js';

...
....

Drilldown(Highcharts);

Following the example here: http://www.highcharts.com/blog/192-use-highcharts-to-create-charts-in-react

Similar github issue: https://github.com/highcharts/highcharts/issues/6086

Webpack bundler:

module: {
    loaders: [
        {
            test: /\.js|jsx$/,
            loader: 'babel-loader',
            exclude: /(node_modules)/
        },
        {
            test: /\.json$/,
            loader: 'json-loader'
        }
    ]
},

Exception thrown:

drilldown.js:25 Uncaught TypeError: e.doDrilldown is not a function
    at object.<anonymous> (drilldown.js:25)
    at H.fireEvent (highmaps.src.js:1801)
    at object.firePointEvent (highmaps.src.js:16012)
    at H.Pointer.onContainerClick (highmaps.src.js:12641)
    at HTMLDivElement.container.onclick (highmaps.src.js:12675)

In a different file, I have loaded react-highcharts but I am not even using drilldown.

Answer 1

The reason why the error occurred is that Drilldown(Highcharts) is called multiple times. A Highcharts module works in the way that they modify Highcharts objects. There is no any kind of protection for overwriting Highcharts with the same module multiple times - and this seems to be the issue here.

You can write a helper file for importing Highcharts in a safe way. In the helper you can check if the drilldown module was already initialised and re-export Highcharts.

src/Highcharts.js

import Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';

if (!Highcharts.Chart.prototype.addSeriesAsDrilldown) {
    Drilldown(Highcharts);
}

export default Highcharts;

Now, you should use your helper file for importing Highcharts and you will be safe from multiple overwriting Highcharts main.

src/Chart.js

import Highcharts from './Highcharts.js';

export default function () {
    Highcharts.chart('container', {
        series: [{
            type: 'column',
            data: [{
                y: 2,
                drilldown: 'd1'
            }]
        }],

        drilldown: {
            series: [{
                type: 'column',
                data: [1,2,3,4],
                id: 'd1'
            }]
        }
    });
}