keshav1007
Posts: 8
Joined: Mon Apr 02, 2018 10:09 am

Highmaps Bubble chart is empty

Hi,

I am trying to create a bubble map using high maps and i am using angular 5. I am getting the map empty always. I have reproduced it here - https://stackblitz.com/edit/angular-hig ... mponent.ts

What am i missing? thanks in advance
daniel_s
Posts: 753
Joined: Fri Sep 01, 2017 11:01 am

Re: Highmaps Bubble chart is empty

hi keshav1007,

Thank you for contacting us, and welcome on our forum!
Your chart is empty because you missed the map loading process. In your chart configuration you chose the 'custom/world' one, but never load it before. You've to create the map basing on our map collection (in this case) and then import this map file into your component file, just like that:

app.component.ts

Code: Select all

import worldMap from './assets/worldMap';
After that you are able to use it in chart configuration:

Code: Select all

chart: {
    map: worldMap
},
Now it should works well. To show more specifically how to achieve that, I produced the example. You can look on it by clicking the link below.

Live example: https://stackblitz.com/edit/angular-hig ... ock-byjo6a

P.S I also recommend you to use our official wrapper. You can read more about it here: https://www.npmjs.com/package/highcharts-angular

Best regards!
Daniel Studencki,
Highcharts Developer
keshav1007
Posts: 8
Joined: Mon Apr 02, 2018 10:09 am

Re: Highmaps Bubble chart is empty

Thanks @daniel_s. I was not aware of highcharts-angular. Will use official wrapper and let you know if everything goes well. Thanks again
keshav1007
Posts: 8
Joined: Mon Apr 02, 2018 10:09 am

Re: Highmaps Bubble chart is empty

This works well. I am now using the official highcharts wrapper. But i think somewhere change detection is not triggered and my pie charts are not responsive. I have set the container width as 100% but still the pie chart overflows beyond the container and it is hiding not resized based on the container width. Can you help me on this?
keshav1007
Posts: 8
Joined: Mon Apr 02, 2018 10:09 am

Re: Highmaps Bubble chart is empty

Got it I was putting the chart inside a dynamically loaded div so the default height and width was set. Changed it now works properly thanks anyway :)

Return to “Highcharts Maps”