Receiving "Highcharts is not defined" error when using maps (Highmaps / Highcharts)

help
1

I’ve used Highcharts quite a bit and the charts work great, but I’ve been stuck trying to make Highmaps work for quite a while now.

I believe I have everything setup correctly with my test map that I’m trying to make work because it works correctly in JSFiddle.

The error I’m receiving in my browser console is this:

“Uncaught ReferenceError: Highcharts is not defined at
https://code.highcharts.com/mapdata/custom/world-highres.js:1:1 (anonymous function) @ world-highres.js:1”

The first part of world-highres.js is: Highcharts.maps["custom/world-highres"] = { ...

Does anyone know why Highcharts would be coming back as undefined here?

I’m using Meteor 1.3.5.1 and I have Highcharts 5.0.4 installed through NPM.

Here’s how I currently have things setup:

exampleTemplate.js

import Highcharts from 'highcharts';
require('highcharts/modules/map')(Highcharts);

Template.exampleTemplate.onRendered(function() {
  
  // Example data
  var mymapdata = [
    {
     key: "US",
     value: 198812
    },
    {
     key: "GB",
     value: 52894
    },
    {
     key: "CA",
     value: 35572
    }
  ];

  // Initiate
  Highcharts.mapChart('country-map-container', {
        title: {
            text: 'Highmaps Example'
        },
        subtitle: {
            text: 'Example'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        colorAxis: {
            min: 0
        },
        
        series: [{
            data: mymapdata,
            mapData: Highcharts.maps['custom/world-highres'],
            joinBy: ['iso-a2', 'key'],
            name: 'Random data',
            states: {
                hover: {
                    color: '#a4edba'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
  });

});

exampleTemplate.html

<template name="exampleTemplate">
  <div id="country-map-container" style="width:100%; height:400px;"></div>
</template>

Head tag:

<head>
    <script src="https://code.highcharts.com/mapdata/custom/world-highres.js"></script>
</head>

Here’s what it looks like with the code above:

screenshot
ifz8Afg.png775×551

I’ve tried a lot of different things and spent a ton of time on this but nothing I’ve tried seems to make it work… Any help with this would be extremely appreciated.

2

Have you tried one of the many packages for Meteor (instead of NPM)?

 meteor search highcharts
Matching packages:                            
clarencel:highcharts-drilldown  Add Drilldown module to Highcharts - this will add the maazalik:highcharts package
elmarti:highcharts              Highcharts with rerender on window resize option
highcharts:highcharts-meteor    Official wrapper for Highcharts, Highstock and Highmaps charting libraries.
maazalik:highcharts             HighCharts for Meteor, with an easy to use helper to get you started!
maazalik:highcharts-3d          HighCharts 3D charts for Meteor
maazalik:highcharts-gauge       HighCharts gauge for Meteor
mhourahine:highcharts-heatmaps  Add Heatmaps module to Highcharts - requires the maazalik:highcharts package
mrt:highcharts                  Easily create charts with Highcharts.
mrt:highcharts-with-exporting   Highcharts with exporting.
s2corp:highcharts.com           Angular Highcharts
tallyb:highcharts               HighCharts for Meteor, with an easy to use helper to get you started!
tallyb:highcharts-only          HighCharts for Meteor, with an easy to use helper to get you started!
veekungx:highcharts-ng          angular highcharts-ng
3

This is due to a combination of ES6/2015 imports, which doesn’t expose global objects, and Highcharts map collections, which are basically “patches” to add an object to Highcharts.maps.

Importing Highcharts into your template doesn’t expose Highcharts into the global scope, so it doesn’t matter where you try to place the recommended <script> tag. A typical map collection patch is expected to be run immediately and explicitly sets a new object on Highcharts.maps by doing something like:

Highcharts.maps["custom/world-highres"] = { ... }

The best way forward here would be to request Highcharts to add npm packages for easy loading of map collections into modern JavaScript. Failing that, I can only suggest pasting the map collection patch into your own function and executing it when you have imported the Highcharts object.

4

@jamgold Thanks for the reply, for now I’ve decided to go with using a package instead of NPM, the package I’m using is maazalik:highcharts and it seems to have solved my problems.

@robfallows Thanks very much for the explanation as to whats happening here! I’m going to contact Highcharts and make that request, and in the meantime I’ve decided to go with using a package instead of NPM, the package I’m using is maazalik:highcharts.

1 Like