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

Set Highcharts map width to 100% and height to a fix value

Sat Jul 02, 2022 2:33 am

Hello,

I'm trying to set a map's width to 100% (the parent element has a width across the whole screen, so 100vw) but limit the height to 250px. However, the map always defaults back to the 600px width.

I'm not setting a width in the chart options but only the height of 250px.

Code: Select all

this.chartOptions = { chart: { height: 250, ... }, ... }
How do I get the chart's width to adjust to the container size?

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Set Highcharts map width to 100% and height to a fix value

Mon Jul 04, 2022 8:11 am

Hello littlerave!
Thanks for contacting us with your question!

I was trying to reproduce your problem, but in my case, everything is working correctly. I see, that you are using this.chartOptions so I assume, you are using an angular and I have prepared a simple demo using Angular. I set width to 100vw, height to 250px and zoom to a random location to show that the map is stretched to the width. Could you reproduce your issue in an online editor? You can use my demo.

Demo: https://stackblitz.com/edit/highcharts- ... map-xkuxec

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer

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

Re: Set Highcharts map width to 100% and height to a fix value

Mon Jul 04, 2022 6:27 pm

Thank you for your reply. Your assumption is correct, I'm using angular. If I set the 100vw as inline style to the <highcharts-chart> element, it does work. Is there a way to set the width in my scss files instead of inline?

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Set Highcharts map width to 100% and height to a fix value

Tue Jul 05, 2022 7:51 am

littlerave,

You can add these lines to your SCSS file:

Code: Select all

highcharts-chart {
  width: 100vw;
  display: block;
}
and import SCSS files in component, like this:

Code: Select all

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
You can check the working demo below.
Demo: https://stackblitz.com/edit/highcharts- ... map-buvlkc

Feel free to ask any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer

deanne78
Posts: 1
Joined: Fri Jul 08, 2022 11:13 am
Location: NYC USA

Re: Set Highcharts map width to 100% and height to a fix value

Fri Jul 08, 2022 11:15 am

useful information

hubert.k
Posts: 676
Joined: Mon Apr 11, 2022 11:48 am

Re: Set Highcharts map width to 100% and height to a fix value

Fri Jul 08, 2022 11:48 am

Thanks for your reply and opinion. If you have any further questions, feel free to contact us.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”