title: Does toggling in React affect highchart display?
body: <p>I am just toggling a show value on click of a button as follow:</p>
  
  <pre><code>render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h1 className="App-title"&gt;Welcome &lt;/h1&gt;
          &lt;/header&gt;
  
          &lt;div id={'container'}&gt;
            &lt;HighchartsReact
              highcharts={Highcharts}
              options={this.state.options}
            /&gt;
          &lt;/div&gt;
  
          &lt;button onClick={this.toggleHidden.bind(this)}&gt;More info&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>ToggleHidden and constructor are defined as follows:</p>
  
  <pre><code>constructor(props){
      super(props);
      this.state={isHidden:true,options:{},currentdisplay:{}};
      //this.show= this.show.bind(this);
  }
  
  componentDidMount(){
      this.callApi()
      .then(res =&gt; this.setState({options:res}))
      .catch(err =&gt; console.log(err));
  };
  
  toggleHidden () {
      this.setState({
          isHidden: !this.state.isHidden
      })
  }
  </code></pre>
  
  <p>For some reason, my chart gets pushed up when I click the button for the first time and then on every consecutive click it remains the same. I am not able to understand this behaviour. 
  The options for my chart are set by calls to a backend express server. The code is as follows: </p>
  
  <pre><code>callApi = async () =&gt; {
    const response = await fetch('/api/xdata', {
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    });
  
    const body = await response.json();
    const response2 = await fetch('/api/ydata', {
      headers: new Headers({
        'Content-Type': 'application/json'
      })
    });
    const body2 = await response2.json();
  
    const re = JSON.parse(body);
  
    var re2 = JSON.parse(re2);
  
    var options = {
      title: {
        text: 'Trying'
      },
      chart: {
        type: 'column'
      },
      xAxis: {
        title: { text: 'xdata' },
        categories: re.xdata
      },
      yAxis: {
        title: {
          text: 'y data'
        }
      },
      series: {
        data: re2.ydata.map(Number)
      }
    };
  
    if (response.status !== 200) throw Error(body.message);
    return options;
  };
  </code></pre>