ovryu
Posts: 18
Joined: Fri Jul 17, 2020 12:04 am

How to increase height of world map

Good day,

I'm looking to increase the height of a world map but when I set the height for my container or through:

Code: Select all

  chart: {
            width: 600,
            height: 900
        },
It just increases the surrounding heigh but I'm looking to stretch the map and have more of a zoomed-in look if possible. It seems to stretch as expected with the width, but the height just increases the white space around it. Is it possible to increase the height some more?

Here is a link to my jsfiddle: https://jsfiddle.net/pkqwz6as/3/

Best.
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: How to increase height of world map

Hello ovryu,

Thanks for contacting us with your question.

Increasing the height increase the white space because you have fixed width in your config. The map always want to keep its aspect ratio, and increasing height without increasing width accordingly will always end up with bigger whites pace. Remove the fixed width both in chart config and css and check how height affects map.
Demo: https://jsfiddle.net/BlackLabel/fdyq0Lbr/

You have also suggested more zoomed-in look, and it actually something that you might want to try in this case. You can achieve it with mapZoom() function.
Demo: https://jsfiddle.net/BlackLabel/ng3yj9o4/
API reference:https://api.highcharts.com/class-refere ... rt#mapZoom

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Maps”