goodday
Posts: 7
Joined: Mon Oct 04, 2021 9:28 pm

Highmaps in AngularJS

I'm having trouble integrating highmaps into an AngularJS app.
I'm adding the reference through requireJS

Code: Select all

define(
	[
		'angular', 
		'require',  
		'moment-timezone',
		'../services/highmaps.js'+modifier,
		'../js/highcharts.js'+modifier
	]
My call to

Code: Select all

Highcharts.mapChart()
fails saying

Code: Select all

TypeError: Highcharts.mapChart is not a function
.

Checking

Code: Select all

Highcharts 
in the console, I get

Code: Select all

{product: 'Highcharts', version: '6.2.0', deg2rad: 0.017453292519943295, doc: document, hasBidiBug: false, …}
. There is no

Code: Select all

mapChart 
function.

I've got highcharts.js included in this page also (through the master template that I have no control over). Does that have any bearing on it? Is it not finding the right

Code: Select all

Highcharts 
obect?

Thanks
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highmaps in AngularJS

Hi goodday,
Thanks for contact and your question, welcome to our forum.

What you provide looks quite strange to me, I know Angular 2.0 but I don't know what is going on here, can you reproduce an example in the online editor?
I'm not sure, are you importing the map module the right way?

Have you familiar with this blog article with configuration for angular.js?
https://www.highcharts.com/blog/tutoria ... ngular-js/

Let me know how are you going with this, good day!
Best regards.
Sebastian Hajdus
Highcharts Developer
goodday
Posts: 7
Joined: Mon Oct 04, 2021 9:28 pm

Re: Highmaps in AngularJS

Thanks for the reply. I added to the jsfiddle you linked to a single line, to include highchart maps.
https://jsfiddle.net/o4vtp7rc/
This give me an error
Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16/
at Object.<anonymous> (highcharts.src.js:224)
at B (highcharts.src.js:1668)
at Object.r [as error] (highcharts.src.js:246)
at highmaps.src.js:21
at highmaps.src.js:9
It's different from the one I get in my environment but do highcharts and highmaps not work together on one page?
In my scenario I cannot remove highcharts as it is in the master page.
Cheers
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highmaps in AngularJS

Hi,
Thanks for clarifying, I think you miss the constructor which Initializes the map.

Code: Select all

Highcharts.mapChart('container', {
   ...
});

Demo:
https://jsfiddle.net/BlackLabel/o25k6a9w/

Documentation:
https://www.highcharts.com/docs/maps/ge ... ze-the-map

Let me know if that was what you were looking for.
Best regards.
Sebastian Hajdus
Highcharts Developer
goodday
Posts: 7
Joined: Mon Oct 04, 2021 9:28 pm

Re: Highmaps in AngularJS

Thanks Sebastian,
In my original example I'm using
Highcharts.mapChart('...
That's exactly where it fails, telling me

Code: Select all

TypeError: Highcharts.mapChart is not a function
, see the original post for details.
goodday
Posts: 7
Joined: Mon Oct 04, 2021 9:28 pm

Re: Highmaps in AngularJS

It is highcharts and highmaps conflicting!
I was not aware that there is a plugin version of highmaps. Using that instead of the standalone one resolves the conflict.
Thanks all
goodday
Posts: 7
Joined: Mon Oct 04, 2021 9:28 pm

Re: Highmaps in AngularJS

I still have an issue here, though.
The master template loads highcharts.js.
The code I'm working with loads highmaps (module). However, it is loaded in the wrong order. I tried loading highcharts first and then highmaps in my code. It seems, though, that the higmaps in the master template keeps overruling my code. I can tell by the version when I query the Highcharts object in the F12 console. As mentioned, I cannot change the master template.

Is there a way that I could load highcharts+highmaps in a different scope - or modify it so I can call Highmap.mapChart? I sneakily tried renaming it in the minified source file but that didn't get me anywhere.

Any ideas there? I'd love to keep using highmaps, it's so easy to work with (well, except for this issue...)

Cheers
goodday
Posts: 7
Joined: Mon Oct 04, 2021 9:28 pm

Re: Highmaps in AngularJS

Another update...
I got one step closer, getting the order correct. Now I'm getting another error

Cannot read properties of undefined (reading 'Core/Axis/Axis.js')

A bit of research suggests that there is a version incompatibity. I'm using highcharts 6.2.0 (which I cannot change).
Is there a way to get a matching Highmaps plugin?

THanks
goodday
Posts: 7
Joined: Mon Oct 04, 2021 9:28 pm

Re: Highmaps in AngularJS

Found 6.2 on your website after all, everything is working now.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highmaps in AngularJS

That's great to hear! :)
In case of any further questions, feel free to contact us again.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”