Highcharts maxWidth или maxHeight карты

Question

Я пытаюсь установить maxWidth моей карты мира с помощью highcharts, но это не меняет размер.

Я пробовал это:

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

Как предлагается здесь и демо .

chart: {
    maxWidth: 1024
},

Как предлагается здесь , демо .

Я использую код из этого примера .

Обновление 10 февраля 2020 года:

Следуя приведенным ниже рекомендациям, я использую этот код который можно найти здесь :

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'));

Затем откройте результат в новом окне. Вы увидите, что карта перемещается ниже верхней части экрана в мобильном представлении в Google Chrome. Это все еще происходит с margin: 0.

Answer 1

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

Над опцией - это условие, для которого будет применена следующая определенная опция диаграммы, в случае если общая демонстрация будет:

chartOptions: {
    xAxis: {
        labels: {
            formatter: function () {
                return this.value.charAt(0);
            }
        }
    },
    yAxis: {
        labels: {
            align: 'left',
            x: 0,
            y: -2
        },
        title: {
            text: ''
        }
    }
}

Highcharts не предлагает функцию chart.maxWidth, только функция chart.width, которую вы предоставили в API для установки фиксированного значения ширины диаграммы.

Вы можете установить максимальную ширину для div, где отображается карта Highcharts, но помните об импорте CSS.

Демо: https://stackblitz.com/edit/react-ts-5upg3v?file=index.tsx

Или без CSS в виде встроенного стиля - демонстрация: https://stackblitz.com/edit/react-ts-uy5xkd?file=index.tsx