littlerave
Posts: 37
Joined: Sun May 16, 2021 4:17 pm

Make Highcharts map take 100% width and height depending on map content

Hello,

In my angular app I have a highcharts map inside a container with dynamic width. I load a custom svg map into the highcharts element. I want the map to take up the full 100% width of the container and the height adjust according to the size of the map, so the paths of the map take up the full width.

Unfortunately, Highcharts only allows for fixed pixel sizes to be set, which is very frustrating. I've tried to set height and width to null, which doesn't do anything, the map still defaults to its 600x400px. I've tried to set the scss of

Code: Select all

highcharts-chart { display: block, width: 100%, height: auto }
and while that creates a highcharts element with 100% width, the

Code: Select all

<g class="highcharts-series-group">
that actually contains the paths of the map is still far too small because the height is still set to 400px - the aspect ratio of my map is about 3:4, so at 600px width, it should have a height of 800px; note, it could be anything though, because I can load in different svgs with different aspect ratios and 600px is not actually my container width. Additionally, upon initialization, because the container has not been drawn yet, the highcharts element's width is way too large (931px instead of the container's 762px - only if I resize the viewport and the chart gets redrawn, it takes the proper width).

Is there a way to actually set the highcharts map to width 100% and height auto so the paths take up the full width of the container?
magdalena
Posts: 517
Joined: Tue Aug 24, 2021 1:32 pm

Re: Make Highcharts map take 100% width and height depending on map content

Hi,

Thanks for contacting us with your question!

If you want to have 100% width and relevant (3/4) ratio, try to set the following to your chart:

Code: Select all

      chart: {
        height: (3 / 4 * 100) + '%'
      },

Demo:
https://jsfiddle.net/BlackLabel/3zmpkr7x/

Let me know if that was what you were looking for,
Regards!
Magdalena Gut
Developer and Highcharts Support Engineer
littlerave
Posts: 37
Joined: Sun May 16, 2021 4:17 pm

Re: Make Highcharts map take 100% width and height depending on map content

Thank you for your response. Unfortunately, as I've mentioned, the aspect ratio can be anything because the user can upload any svg file with map data. This means, I cannot set a specific aspect ratio, it needs to be automatically taken from the svg dimensions.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Make Highcharts map take 100% width and height depending on map content

Hello,

You can use chart.events.render() callback function to automatically calculate aspect ratio.

Demo: https://jsfiddle.net/BlackLabel/2uwngkyq/
API: https://api.highcharts.com/highcharts/c ... nts.render

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Maps”