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.
So highcharts.Map is undefined. I have tried multiple things:
Same issue. What am I doing wrong?
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:
meteor add highcharts:highcharts-meteor.meteor in order to initialise the highcharts-container./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"
]
}
<head>
<title>meteor-highcharts-demo</title>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>
<template name="map">
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>
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²'
}
}]
});
});
}
meteor to start your app.I have prepared also a demo repository, which is hosted on GitHub.