Chart does not resize inside shadow DOM (e.g. Polymer)

Expected Behavior

The Bar Chart should resize when the window size is changed.

Current Behavior

The wrapper div does resize, but the Chart does not.

Steps to Reproduce (for bugs)

https://stackblitz.com/edit/polymer310-testcase-chartjs

import '../../../node_modules/chart.js/dist/Chart.js'

class BarChartElement extends PolymerElement {
  static get template() {
    return html`  
        <style include="shared-styles2">
        #content{
            height: 100%;
            width: 100%;
        }
        </style>
        <div id="content"></div>
      `;
  }
ready(){
super.ready();

        let iCan = document.createElement('canvas');
        iCan.id = 'temp';

        this.$.content.appendChild(iCan);

       setTimeout(function () {
           let ctx = (this.$.content.firstElementChild);
           this.chart = new Chart(ctx, {
               type: 'bar',
               data: {
                   datasets: [{
                       backgroundColor: color,
                       data: data,
                   }],
               },

               options: {
                   responsive: true,
                   maintainAspectRatio: true,
                   legend: {
                       display: false,
                   },
                   tooltips: {
                       enabled: false,
                   },
                   scales: {
                       xAxes: [{
                           scaleLabel: {
                               display: true,
                               labelString: 'Wochen',
                               fontSize: 16,
                           },
                           ticks:{
                               stepSize:1,
                               autoSkip: false,
                           },
                       }],
                       yAxes: [{
                           scaleLabel: {
                               display: true,
                               labelString: 'Auslastung in %',
                               fontSize: 16,
                           },
                       }]
                   }
               }
           });
       }.bind(this), 1);
    }
}
window.customElements.define('bar-chart', BarChartElement);

Environment

• Chart.js version: 2.7.2
• Browser name and version: Chrome(latest)
• Link to your project: https://stackblitz.com/edit/polymer310-testcase-chartjs

[etimberg]

@jwillmer one caution on that is that it only fires if the whole page resizes, but it won’t fire if the div containing the chart resizes.

[Simon-Tang]

In the meantime, I was able to get the Chart to resize inside the Shadow DOM with this snippet:

this.shadow = this.attachShadow({ mode: 'open' });

const resizeStylesheet = document.createElement('link');
resizeStylesheet.setAttribute('href', 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css');
resizeStylesheet.setAttribute('rel', 'stylesheet');

this.shadow.appendChild(resizeStylesheet);