unable to resize chat after update dom with chartjs 2.7

It works on chartjs 2.6 but DOSE NOT on 2.7.

Could you fix this?

Here is my js code.

class DataSet extends React.Component {
  ...

  const data = {
   labels = ["aaa", "bbb", "ccc"];
   datasets = [
     { label: "xxxx", backgroundColor: "xxx", data: [...], ... },
     { label: "yyyy", backgroundColor: "yyy", data: [...], ... },
     { label: "xxxx", backgroundColor: "xxx", data: [...], ... },
   ]
  }

  const options = {
    responsive: true,
    ...
  }

  render() {
    return(<PowerMonitorGraph data={data} options={options} />)
  }
}

class PowerMonitorGraph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data,
      options: this.props.options
    }
  }

  componentWillReceiveProps(props) {
    if (props.data !== this.state.data) {
      this.setState({data: props.data});
    }
    if (props.options !== this.state.options) {
      this.setState({options: props.options});
    }
  }

  render() {
    return (
      <Line data={this.props.data} options={this.props.options} redraw={true}/>
    )
  }
}

And then here is debug.

After first rending,it works fine.

<div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
  <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
    <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
  </div>
  <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
    <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
  </div>
</div>
<canvas height="422" width="844" class="chartjs-render-monitor" style="display: block; width: 844px; height: 422px;"></canvas>

After update dom, resize does’t work.

<canvas height="422" width="844" class="chartjs-render-monitor" style="display: block; width: 844px; height: 422px;"></canvas>

[jeghers]

I have a similar problem, chart will resize it’s width, but the height will never change. Is there ANY example showing how to make a chart resize properly when it’s parent resizes?

[ptux]

I do not care about this anymore. so, I close this.