Highcharts maxWidth or maxHeight of map

Question

I'm trying to set the maxWidth of my world map with highcharts but it doesn't change the size.

I've tried these:

responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
...

As suggested here and demo.

chart: {
    maxWidth: 1024
},

As suggested here, demo.

I'm using the code from this example.

Update 10 Feb 2020:

Following the suggestion below, I use this code which can be found here:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import * as Highcharts from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official';

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json';

var data: [string, number][] = [
    // data can be found in the link
];


const options: Highcharts.Options = {
    chart: {
      height: 400
    },

    series: [{
        type: 'map',
        mapData: mapDataWorld,
        data: data,
    }],

    responsive: {
      rules: [{
        chartOptions: {
          chart: {
            height: 800
          },
          legend: {
              margin: 0
          },
          title: {
            margin: 0
          },
        },
        condition: {
          maxWidth: 1024
        }
      }]
    }
}

const App = (props: HighchartsReact.Props) =>  <div style={{
  maxWidth: '1024px',
}}>
    <HighchartsReact
        options={options}
        highcharts = { Highcharts }
        constructorType={'mapChart'}
                {...props}
    />
</div>

ReactDom.render(<App />, document.getElementById('root'));

Then open the result in a new window. You'll see the map is pushed below the top of the screen in mobile view in Google Chrome. This still happens with margin: 0.

Answer 1

responsive: {
    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 () {
                return this.value.charAt(0);
            }
        }
    },
    yAxis: {
        labels: {
            align: 'left',
            x: 0,
            y: -2
        },
        title: {
            text: ''
        }
    }
}

Highcharts doesn't offer a chart.maxWidth feature, only the chart.width feature as you shared from the API to set the fixed value for chart width.

You can set the max-width for the div where Highcharts map is rendering, but remember about importing CSS.

Demo: https://stackblitz.com/edit/react-ts-5upg3v?file=index.tsx

Or without CSS as inline-style - demo: https://stackblitz.com/edit/react-ts-uy5xkd?file=index.tsx