CODEWITHSUNDEEP
javascriptcssreactjshighcharts
matsomo
matsomo

Reputation: 510

How to scale Highcharts height on window resize with React

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.

Upvotes: 6

Views: 13900

Answers (2)

roob
roob

Reputation: 2529

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)

Upvotes: 18

ppotaczek
ppotaczek

Reputation: 39069

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

Upvotes: 1

Related Questions