Chart does not resize inside shadow DOM (e.g. Polymer) #5763
Description
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