timohuber
Posts: 3
Joined: Sat Oct 31, 2020 10:48 am

Highchart Map Plot Padding

Hello,

I am building a world map with multiple series on it.
You can find my prototype here: https://jsfiddle.net/a31uo5kh/2/

Now i am trying to trying add "padding" to the plot area, so only when a users zooms into the map, the entire svg element is filled, like this: Image
https://drive.google.com/file/d/1cBixbE ... LxHHb/view

Currently the map completely fills out the svg element.

I tried spacing, plotAreaWidth and Height, but so far nothing worked like I want it to.

I hope someone knows how to solve that.

Thanks!
timohuber
Posts: 3
Joined: Sat Oct 31, 2020 10:48 am

Re: Highchart Map Plot Padding

Hello,

I am building a world map with multiple series on it.
You can find my prototype here: https://jsfiddle.net/a31uo5kh/2/

Now i am trying to trying add "padding" to the plot area, so only when a users zooms into the map, the entire svg element is filled, like this: Image
https://i.ibb.co/6bjT3Lz/Unbenannt.png

Currently the map completely fills out the svg element.

I tried spacing, plotAreaWidth and Height, but so far nothing worked like I want it to.

I hope someone knows how to solve that.

Thanks!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Highchart Map Plot Padding

Hello timohuber!

Welcome to our forum and thanks for contacting us with your question!

I'm not sure if I understood you correctly. Could you provide us a screenshot of the desired look of the chart? Do you want the chart to fill out the whole space that's enabled? I would appreciate it a lot if you describe your problem more precisely. :)

Best regards!
Dominik Chudy
Highcharts Developer
timohuber
Posts: 3
Joined: Sat Oct 31, 2020 10:48 am

Re: Highchart Map Plot Padding

Hello dominik
Of course. This is the desired look: https://i.ibb.co/6bjT3Lz/Unbenannt.png
This is the current look: https://jsfiddle.net/a31uo5kh/2/

So I want to reduce the size of the actual map inside the plot area. If a user zooms in, it should still use the full area of the plot area.
Is that more clear? :)
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Highchart Map Plot Padding

Hi again!

In the CSS section, we can set the body margin to 0, and in the JS section set margin and spacing to 0. When we do that the chart looks like the one from your screenshot.

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

API references:
https://api.highcharts.com/highcharts/chart.spacing
https://api.highcharts.com/highcharts/chart.marginLeft
https://api.highcharts.com/highcharts/chart.marginRight

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

Return to “Highcharts Maps”