I have this example .jsx where I'm trying to make the the two charts in the left container share the height and respond to window resizing.

I've made the width responsive by setting overflow: hidden, forcing the charts to rescale as far as I understand, but I don't know how to get the same effect with the height.

Setting height='100%' in the Chart component doesn't help.

I have this example https://stackblitz.com/edit/react-sjyuej?file=Chart1.jsx where I'm trying to make the the two charts in the left container share the height and respond to window resizing.

I've made the width responsive by setting overflow: hidden, forcing the charts to rescale as far as I understand, but I don't know how to get the same effect with the height.

Setting height='100%' in the Chart component doesn't help.

• javascript
• css
• reactjs
• highcharts

• Hi Matsomo, I recommend you to use highhcarts-react-official wrapper, which in easy way allow you to use default Highcharts options and methods: npmjs.com/package/highcharts-react-official – ppotaczek Commented Nov 23, 2018 at 10:14
• Hey, I updated my example to better illustrate what I'm trying to accomplish: stackblitz.com/edit/react-lknnch I'm trying to make the chart and table share the space equally. I tried the official wrapper as well, but my problem is that I can't find a way to make the height scale – matsomo Commented Nov 23, 2018 at 11:50

2 Answers 2

Use the highcharts-react-official package (>= 2.1) and set containerProps={{ style: { height: "100%" } }}.

This will make the chart dynamically resize to fill its parent div. You can then set up parent divs using flexbox to get your desired layout.

For example your render method would look like this:

render() {
  return (
    <HighchartsReact
      containerProps={{ style: { height: "100%" } }}
      highcharts={ Highcharts }
      options={ options }
    />
  );
}

Here is a live demo

Make sure you are on version >= 2.1 of highcharts-react-official (see this github issue)

After setting the height, you need to use chart.reflow() method:

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

Live demo: https://stackblitz.com/edit/react-3jwwvt?file=ChartOfficial.jsx