Как масштабировать высоту Highcharts при изменении размера окна с помощью React

Question

У меня есть этот пример https://stackblitz.com/edit/react-sjyuej?file=Chart1.jsx, где я пытаюсь заставить две диаграммы в левом контейнере разделить высоту и ответить на изменение размера окна.

Я сделал ширину адаптивной, установив переполнение: скрытый, заставляя диаграммы масштабировать, насколько я понимаю, но я не знаю, как получить тот же эффект с высотой.

Установка высоты = '100%' в компоненте Диаграмма не помогает.

Answer 1

После установки height необходимо использовать метод chart.reflow():

componentDidMount(){
  const container = this.chartComponent.current.container.current;
  const table = document.getElementsByClassName('table')[0];

  container.style.height = table.clientHeight + 'px';
  this.chartComponent.current.chart.reflow();
}

API: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

Демонстрационная версия: https://stackblitz.com/edit/react-3jwwvt?file=ChartOfficial.jsx