HighStocks with Reactjs - заставляет его занимать полный размер контейнера div

Question

Я пробую React с HighStocks, используя оболочку HighCharts для React https://www.highcharts.com/blog/tutoria ... реаги-101 /

Я не могу заставить элемент управления HighStocks занимать полный размер контейнера когда контейнер div использует 100% ширины и 100% высоты, а субконтейнеры имеют высоту: cal c (100% - 40px);

Было бы очень полезно, если есть образец или пример можно поделиться, показывая, что HighStocks занимают полный размер контейнера div в React, используя оболочку HighCharts для React.

Answer 1

Может быть, мне было непонятно, с какой проблемой я столкнулся. Меня беспокоило то, что оболочка React для HighCharts / HighStocks не занимала полную высоту содержимого div.

Сообщенная проблема: HighCharts / HighStock с React не занимала полную высоту

Согласно документации Highcharts:

Highcharts / HighStocks - по умолчанию (при нулевом значении) высота вычисляется из высоты смещения содержащего элемента или 400 пикселей, если содержащая высота элемента равна 0. https://api.highcharts.com/highcharts/chart.height

В случае HighCharts / HighStocks с React оболочка React добавляет элемент div, а HighCharts / HighStocks визуализируется в этом элементе, поэтому HighCharts / HighStocks поднимает высоту этого элемента div.

Решение: Добавление ниже CSS для стилизации div, добавленного оболочкой React, решает проблему. [Без этого стиля css HighChart / HighStock вернется к высоте по умолчанию 400 пикселей и не займет всю высоту]

div[data-highcharts-chart] {
  height: 100%;
  width: 100%;
}

Ниже приведен пример работы: https://codesandbox.io/s/busy-hooks-27uvb?fontsize=14&hidenavigation=1&theme=dark