3

I need help with getting my highmap in angular4 app. I installed highcharts using npm.

I included highcharts in my app.component.ts like this because I had some errors that this way solves (maybe it is the wrong way) :

const Highcharts = require('highcharts');
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/data')(Highcharts);
require('highcharts/js/modules/world')(Highcharts);

After that I can use Highcharts for creating the charts without any problems but the problem is that when I want to create a map using Highcharts.js + map.js I can't seem to get the 'world.js' from map collection included or imported or am I missing something? I tried getting the file the same way above require('.../world.js')(Highcharts) and I tried using the "<script src=""> tag in index.html and using the link from highcharts as source, both ways I get the error (link provided down). I also tried copying the data from the 'world.js' directly into chart options under 'mapData: Highcharts.maps['custom/world'] = {...},' and it works that way. So what could I do to use it instead of copy-pasting the data?

Error screenshot

Community
  • 1
  • 1
i1zivkovic
  • 33
  • 3

1 Answers1

2

To load a map for Highmaps

A map is JSON type file containing mapData code used when a chart is created. Download a map from official Highcharts map collection in Javascript format or use a custom map and add it to your app. Edit the map file, so it could be loaded like a module by adding to beginning and end of a file code below:

(function (factory) {
    if (typeof module === 'object' && module.exports) {
        module.exports = factory;
    } else {
        factory(Highcharts);
    }
}(function (Highcharts) {

...
/* map file data */
...

}));

In case of using a GeoJSON map file format you should add the above code and additionally, between the added beginning and the map file data, the below code:

Highcharts.maps["myMapName"] =

Where "myMapName" is yours map name that will be used when creating charts. Next, you will be loading a local .js file, so you should add in tsconfig.json in your app allowJs: true:

...
"compilerOptions": {
    "allowJs": true,
    ...

The map is ready to be imported to your app.

import * as Highcharts from 'highcharts/highmaps';
import * as HC_myMap from './relative-path-to-the-map-file/map-file-name';
HC_myMap(Highcharts);

Where relative-path-to-the-map-file should be relative (for the module importing the map) path to the map file and map-file-name should be the name of the map file.

Kacper Madej
  • 7,846
  • 22
  • 36