score:9

Accepted answer

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'
            }]
        }
    });
}

score:0

if you still stumble upon this problem as of right now you still need to check it yourself but highcharts plans to include the checking into the library in the future (check #7729)

i extended the check from above a little further. i added checks for all the modules which can be loaded except the data module for which i didn't figure out how you can check it on highcharts.

    // check if highchartsannotation has already been loaded
if (!highcharts.chart.prototype.addannotation) {}

// check if highchartsboost has already been loaded
if (!highcharts.chart.ischartseriesboosting) {}

// check if highchartsdrilldown has already been loaded
if (!highcharts.chart.prototype.addseriesasdrilldown) {}

// check if highchartsexporting has already been loaded
if (!highcharts.chart.prototype.exportchart) {}

// check if highchartsmore has already been loaded
if (!highcharts.seriestypes['gauge']) {}
// you might want to check for all highcharts more modules
// e.g. 'arearange', 'areasplinerange', 'boxplot', 'bubble', 'columnrange', errorbar', 'gauge', 'solidgauge', 'polygon', 'waterfall'

// check if highchartsnodata has already been loaded
if (!highcharts.chart.prototype.hidenodata) {}

// data: could not figure how to check if the data modul has been loaded already

// check if highchartsfunnel has already been loaded
if (!highcharts.seriestypes['funnel']) {}

// check if pyramids has already been loaded (if not need to load funnel)
if (!highcharts.seriestypes['pyramid']) {}

//  check if bellcurve has already been loaded (if not load historgram-bellcurve)
if (!highcharts.seriestypes['bellcurve']) {}

// check if histogram has already been loaded (if not load historgram-bellcurve)
if (!highcharts.seriestypes['histogram']) {}

// check if funnel has already been loaded
if (!highcharts.seriestypes['bullet']) {}

// check if heatmaps already been loaded
if (!highcharts.seriestypes['heatmap']) {}

// check if pareto already been loaded
if (!highcharts.seriestypes['pareto']) {}

// check if sankey already been loaded
if (!highcharts.seriestypes['sankey']) {}

// check if solidgauge has already been loaded
if (!highcharts.seriestypes['solidgauge']) {}

// check if streamgraph has already been loaded
if (!highcharts.seriestypes['streamgraph']) {}

// check if sunburst has already been loaded
if (!highcharts.seriestypes['sunburst']) {}

// check if treemap has already been loaded
if (!highcharts.seriestypes['treemap']) {}

// check if variablepie has already been loaded
if (!highcharts.seriestypes['variablepie']) {}

// check if variwide has already been loaded
if (!highcharts.seriestypes['variwide']) {}

// check if vector has already been loaded
if (!highcharts.seriestypes['vector']) {}

// check if windbarb has already been loaded
if (!highcharts.seriestypes['windbarb']) {}

// check if wordcloud has already been loaded
if (!highcharts.seriestypes['wordcloud']) {}

// check if xrange has already been loaded
if (!highcharts.seriestypes['xrange']) {}

score:1

thanks morganfree, that really helped !

i also had all sorts of issues when loading highcharts modules multiple times, and your workaround has sorted them all !

if others in the community need it, here is my extension of morganfree's wrapper (i just added more modules) :

import highcharts           from 'highcharts';
import highchartsdrilldown  from 'highcharts/modules/drilldown'
import highchartsmore       from 'highcharts/highcharts-more'
import highchartsnodata     from 'highcharts/modules/no-data-to-display'
import highchartsfunnel     from 'highcharts/modules/funnel'
import highchartssolidgauge from 'highcharts/modules/solid-gauge'


// check if highchartsdrilldown has already been loaded
if (!highcharts.chart.prototype.addseriesasdrilldown) {
    highchartsdrilldown(highcharts);
}

// check if highchartsmore has already been loaded
if (!highcharts.seriestypes['gauge']) {
    highchartsmore(highcharts);
}

// check if highchartsnodata has already been loaded
if (!highcharts.chart.prototype.hidenodata) {
    highchartsnodata(highcharts);
}

// check if highchartsfunnel has already been loaded
if (!highcharts.seriestypes['pyramid']) {
   highchartsfunnel(highcharts);
}

// check if highchartssolidgauge has already been loaded
if (!highcharts.seriestypes['solidgauge']) {
   highchartssolidgauge(highcharts);
}

export default highcharts;

Related Query

More Query from same tag