Параметр высокой диаграммы с учетом высоты в процентах не применяется к нагрузке диаграммы

Question

В Highcharts у вас есть возможность добавить отзывчивые правила к вашему графику.Это можно использовать аналогично медиазапросам, где вы настраиваете параметры для разных размеров экрана.

Моя проблема в том, что опция адаптивной диаграммы для высоты не применяется при начальной загрузке диаграммы.Я предоставил jsfiddle , чтобы продемонстрировать проблему.Интересно, что применяются другие правила реагирования.В jsfiddle вы можете видеть, что метки на xAxis сокращаются до отдельных символов, как и ожидалось.Если вы переформатируете диаграмму кнопкой (или измените размер представления), диаграмма получит правило высоты.Кроме того, когда высота задается в пикселях, вместо правило применяется совершенно точно .Однако установка высоты в пикселях - это не то адаптивное поведение, которое мне нужно.

Ниже приведен тот же код из jsfiddle, потому что мне нужно что-то добавить, когда я ссылаюсь на jsfiddles.Я что-то упускаю здесь или это ошибка, которую нужно отправить в Highcharts?Хотя каждый раз срабатывает вызов reflow (), он перерисовывает диаграмму дополнительное время, и я не уверен, что это не вызовет проблемы с динамическим макетом.

var chart = Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: 'Highcharts responsive chart'
},

subtitle: {
    text: 'Resize the frame to see the axes change'
},

xAxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December']
},

yAxis: {
    labels: {
        x: -15
    },
    title: {
        text: 'Items'
    }
},

series: [{
    name: 'Sales',
    data: [434, 523, 345, 785, 565, 843, 726, 590, 665, 434, 312, 432]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        // Make the labels less space demanding on mobile
        chartOptions: {
            chart: {
                    height: "1000%"
            },
            xAxis: {
                labels: {
                    formatter: function () {
                        return this.value.charAt(0);
                    }
                }
            },
            yAxis: {
                labels: {
                    align: 'left',
                    x: 0,
                    y: -2
                },
                title: {
                    text: ''
                }
            }
        }
    }]
}
});

$('#reflow').click(function () {
    chart.reflow();
});