redraw() doesn't respect changes in containing div's size.

I set a listener for window resize events. When fired I call redraw() in my google-chart, as I want my chart to be responsive. to make my chart match the width of it’s containing div when redrawn I have the following css:

google-chart {
    width: 100%;
}

This works when starting from a small width and getting bigger. The window resizes and the graph is redraw with the appropriate width. However when going from big to small, it will not redraw smaller to what the new 100% if containing div is, so I end up with an overflow of the containing div.

This is very strange behavior and I can only assume it’s a bug as the redraw is getting called and it will redraw it larger than current but not smaller.

[jukbot]

For my workaround in Polymer, I’m using iron-resize behavior to detect the size of the chart container.

 class ViewStatistic extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior],
      Polymer.Element) {
      static get is() {
        return 'view-statistic';
      }

   connectedCallback() {
        super.connectedCallback();
        requestAnimationFrame(this._installListeners.bind(this))
      }

      _installListeners() {
         this.addEventListener('iron-resize', this._setChartSize.bind(this))
      }
    
      _setChartSize() {
        this.width = this.$.chartContainer.offsetWidth;
        this.height = this.$.chartContainer.offsetHeight;
        if (this.width > 0) {
          this.columnOptions = {
            width: this.width - 40,
            height: 500,
          }
          this.$.columnChart.redraw()
        }
      }
}
  customElements.define(ViewDashboardStatistic.is, ViewDashboardStatistic);

[rslawik]

Great that you have solved it. I will close this issue then.