Skip to content

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

Description

@makitama

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions