last day (16 days later) » 

11:30 AM
1
A: Highcharts maxWidth or maxHeight of map

Sebastian Wędzelresponsive: { rules: [{ condition: { maxWidth: 500 }, ... Above option is a condition for which the next defined chart option will be applied, in case of shared demo is: chartOptions: { xAxis: { labels: { formatter: function () { ...

 
Thank you Sebastian, let me try it and get back to you.
 
Sure, we can continue this thread here or in case of a new issue start a new topic.
 
Unfortunately, none of them scales up the actual map (the svg), only the div (white space) contains it.
 
Maybe using the responsive rules to change chart height while div width has changed could be a good solution, like here: stackblitz.com/edit/react-ts-nyzu6y?file=index.tsx
 
It does change the size (height) of the svg map but in mobile views, there's a huge gap between the top and the actual map. It loses its responsiveness.
 
11:30 AM
Without setting the responsive rules or by setting RWD on the div by using CSS the chart will keep the 400 px height. You will need to set responsivity if you want to avoid those gaps between the top and map. You can also get some space by setting the legend.margin and title.margin to 0. Demo: stackblitz.com/edit/react-ts-99q5cw?file=index.tsx
 
Thank you @Sebastian for your patience. It still doesn't work for me. Using the example in the link, can you try to set the height to 800px and the maxWidth: 1024px, open as a new window with Chrome and switch to mobile view like iPhone SE or Galaxy S5, you'll see what I meant.
The height of the map container is set, so in smaller screen sizes, the actual map is pushed down. Maybe I'm missing something. I've tried setting CSS rules for the highcharts-container or 'highcharts-series` or highcharts-series-group, etc but none of them works.
 
Could you send me your demo with the options which you had described in the above comment? I checked my last demo in the Chrome in the mobile view and looks fine.
 
This one: stackblitz.com/edit/react-ts-99q5cw?file=index.tsx also I'll update my question so you can see the code and the screenshot.
 
Hello, I moved this thread to the chat. Please notice that the demo which you have shared has different maxWidth than the code which you probably tested. Demo maxWidth in the condition - 375, your shared config maxWidth: 1024. Please notice that this condition is the condition when the set option should be applied, so I set it to 375 what means that if window width will be under the 375px the chart height will be set to 200, otherwise it will back to 400 px height
That's how the above link looks like on my device and I think that it is totally fine.
 
 
5 hours later…
4:21 PM
Oh. I see what you mean. So the condition is like `media query`. heigh = 200px when window <= 375px. That works. I'm trying to make it to height = 800px (or more) in tablet or desktop view so the map will look bigger, but doing this doesn't work. It seems like it's a highcharts' issue (https://github.com/highcharts/highcharts/issues/6291):
```
rules: [
{
chartOptions: {
chart: {
height: 200
},
legend: {
margin: 0
},
title: {
margin: 0
},
},
condition: {
maxWidth: 375
}
},
{
chartOptions: {
chart: {
 

  last day (16 days later) »