如何让Highcharts图表填充父容器的高度？

你的问题核心在于两个点：父容器未设置可继承的有效高度，以及未明确指定Highcharts图表本身使用100%高度。以下是具体解决方案：

1. 确保所有父容器（含祖先层级）设置明确高度 #

百分比高度的生效依赖父元素存在可计算的高度值，所以需要给图表的直接父容器、甚至页面根层级设置高度：

/* 全局样式中添加 */
html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 图表的直接父容器样式 */
.chart-parent {
  height: 100%;
}

2. 在Highcharts配置中指定图表高度为100% #

仅给容器设置高度不够，必须在options的chart配置项里明确让图表占满容器：

const options = {
  chart: {
    height: '100%' // 关键配置：让图表本身继承容器高度
  },
  // 你的其他图表配置（如series、xAxis等）...
};

3. 优化你的组件代码 #

移除不必要的reflow调用，修改后的完整代码示例：

const chartRef = useRef<HighchartsReactRefObject>(null);

const options = {
  chart: {
    height: '100%'
  },
  // 其他图表配置项...
};

return (
  <HighchartsReact
    containerProps={{
      style: { height: '100%', backgroundColor: 'goldenrod' },
    }}
    ref={chartRef}
    highcharts={Highcharts}
    options={options}
  />
);

为什么之前的方法无效？ #

你设置的containerProps确实让外层容器高度变成了100%（从背景色可见），但Highcharts默认会使用400px的固定高度渲染图表，必须通过chart.height: '100%'告诉图表要适配容器高度。同时如果父容器本身高度为auto，容器的100%高度也无法被正确计算。

内容的提问来源于stack exchange，提问作者Mark