How to use Highmaps and Highcharts with Meteor?

Question

I am using the highcharts:highcharts-meteor package in my application. I added highmaps to my configuration. My config object for highcharts is as follows:

{
  "version": "4.2.1",        // Choose version of Highcharts/Highstock/Highmaps.
  "base": "highcharts.js",  // Choose base, can be "highcharts.js", "highstock.js" or "highmaps.js"
  "adapter": "jquery",      // Choose adapter, e.g. "jquery" or "standalone-framework.js".
  "modules": [              // Choose modules to be installed altogether with main library.
    "highcharts-3d.src.js",
    "modules/exporting.js",
    "modules/heatmap.js",
    "modules/maps.js",
    "modules/drilldown.js",
    "themes/gray.js"
  ]
}

I added the maps.js to be able to use both highcharts and highmaps. I am trying to render the sample demo map "US Population Density" without any luck. I am unsure what the right configuration option is and where should I put the us-all.js file in my directory.

The error I get in the browser console is

Cannot set property 'countries/us/us-all' of undefined

The JSFiddle from highcharts demo site is below.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/

So highcharts.Map is undefined. I have tried multiple things:

changed the config base option to highmaps.js
Removing the modules/maps.js
Putting us-all.js in the compatibility directory

Same issue. What am I doing wrong?

Matthias A. Eckhart · Accepted Answer · 2016-01-21T16:49:28.497

The error:

highcharts.Map is undefined

occurs, because you are including modules/maps.js but this file cannot be found. The module you want to include instead is named map.js. This file is located in the directory /packages/highcharts-container/.npm/package/node_modules/highcharts/modules/.

If you want to implement the Highcharts Maps demo in Meteor, follow these seven steps:

Run the command meteor add highcharts:highcharts-meteor.
Run meteor in order to initialise the highcharts-container.
Open the file /client/config.highcharts.json and insert the following Highcharts configuration:

{
  "version": "4.2.1",
  "base": "highcharts.js",
  "adapter": "default",
  "modules": [
    "highmaps.js",
    "modules/exporting.js",
    "modules/heatmap.js",
    "modules/drilldown.js",
    "modules/map.js",
    "themes/gray.js"
  ]
}

Load the US map in your HTML head:

 <head>
    <title>meteor-highcharts-demo</title>
    <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>

Implement a container which wraps your map:

<template name="map">
    <div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>

Instanciate the map:

if (Meteor.isClient) {

  var data = [{
    "value": 438,
    "code": "nj"
  }, {
    "value": 387.35,
    "code": "ri"
  }, {
    "value": 312.68,
    "code": "ma"
  }, {
    "value": 271.4,
    "code": "ct"
  }, {
    "value": 209.23,
    "code": "md"
  }, {
    "value": 195.18,
    "code": "ny"
  }, {
    "value": 154.87,
    "code": "de"
  }, {
    "value": 114.43,
    "code": "fl"
  }, {
    "value": 107.05,
    "code": "oh"
  }, {
    "value": 105.8,
    "code": "pa"
  }, {
    "value": 86.27,
    "code": "il"
  }, {
    "value": 83.85,
    "code": "ca"
  }, {
    "value": 72.83,
    "code": "hi"
  }, {
    "value": 69.03,
    "code": "va"
  }, {
    "value": 67.55,
    "code": "mi"
  }, {
    "value": 65.46,
    "code": "in"
  }, {
    "value": 63.8,
    "code": "nc"
  }, {
    "value": 54.59,
    "code": "ga"
  }, {
    "value": 53.29,
    "code": "tn"
  }, {
    "value": 53.2,
    "code": "nh"
  }, {
    "value": 51.45,
    "code": "sc"
  }, {
    "value": 39.61,
    "code": "la"
  }, {
    "value": 39.28,
    "code": "ky"
  }, {
    "value": 38.13,
    "code": "wi"
  }, {
    "value": 34.2,
    "code": "wa"
  }, {
    "value": 33.84,
    "code": "al"
  }, {
    "value": 31.36,
    "code": "mo"
  }, {
    "value": 30.75,
    "code": "tx"
  }, {
    "value": 29,
    "code": "wv"
  }, {
    "value": 25.41,
    "code": "vt"
  }, {
    "value": 23.86,
    "code": "mn"
  }, {
    "value": 23.42,
    "code": "ms"
  }, {
    "value": 20.22,
    "code": "ia"
  }, {
    "value": 19.82,
    "code": "ar"
  }, {
    "value": 19.4,
    "code": "ok"
  }, {
    "value": 17.43,
    "code": "az"
  }, {
    "value": 16.01,
    "code": "co"
  }, {
    "value": 15.95,
    "code": "me"
  }, {
    "value": 13.76,
    "code": "or"
  }, {
    "value": 12.69,
    "code": "ks"
  }, {
    "value": 10.5,
    "code": "ut"
  }, {
    "value": 8.6,
    "code": "ne"
  }, {
    "value": 7.03,
    "code": "nv"
  }, {
    "value": 6.04,
    "code": "id"
  }, {
    "value": 5.79,
    "code": "nm"
  }, {
    "value": 3.84,
    "code": "sd"
  }, {
    "value": 3.59,
    "code": "nd"
  }, {
    "value": 2.39,
    "code": "mt"
  }, {
    "value": 1.96,
    "code": "wy"
  }, {
    "value": 0.42,
    "code": "ak"
  }];

  Template.map.onRendered(function() {
    // Make codes uppercase to match the map data
    _.each(data, (el) => el.code = el.code.toUpperCase());

    // Instanciate the map
    $('#container').highcharts('Map', {

      chart: {
        borderWidth: 1
      },

      title: {
        text: 'US population density (/km²)'
      },

      legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0.85)',
        floating: true,
        verticalAlign: 'top',
        y: 25
      },

      mapNavigation: {
        enabled: true
      },

      colorAxis: {
        min: 1,
        type: 'logarithmic',
        minColor: '#EEEEFF',
        maxColor: '#000022',
        stops: [
          [0, '#EFEFFF'],
          [0.67, '#4444FF'],
          [1, '#000022']
        ]
      },

      series: [{
        animation: {
          duration: 1000
        },
        data: data,
        mapData: Highcharts.maps['countries/us/us-all'],
        joinBy: ['postal-code', 'code'],
        dataLabels: {
          enabled: true,
          color: '#FFFFFF',
          format: '{point.code}'
        },
        name: 'Population density',
        tooltip: {
          pointFormat: '{point.code}: {point.value}/km²'
        }
      }]
    });
  });

}

Run meteor to start your app.

I have prepared also a demo repository, which is hosted on GitHub.

Hi Matthias: The steps worked for me. The map renders. Thanks. But I had a set of other charts in different templates, bar, pie and bubble. I lost the bubble chart. Only error I see is highcharts error 17. http://www.highcharts.com/errors/17 — SudiB, Jan 21 '16 at 16:38
@SudiB Could you please add `highcharts.js` and `highcharts-more.js` to your `/client/config.highcharts.json`? This may fix your error. — Matthias A. Eckhart, Jan 21 '16 at 16:50

How to use Highmaps and Highcharts with Meteor?

1 Answers1