Chart.js pie chart in table shows weird behavior on page resize - html-table

Question

There are chart.js pie charts in a html table.
The issue: on zoom-out and then zoom-in, the cells do not resize to their initial size.
The layout looks something like this:
__________________________
| inner div | inner div |
|_____________|____________|
| | |
| Pie1 | Pie2 |
|_____________|____________|
I have referred the documentation on resizing and this link to add responsive and maintainAspectRatio fields in options object.
On setting responsive:true, the diagram is enabled to resize on zoom.
Setting maintainAspectRatio:false, to fix previous irregular zoom issue where the multiple charts do not resize proportionally since they take table cell's width.
Just for reference there is a blurry text issue with chart.js zoom mentioned at
github here.
Sourcecode of issue on JS fiddle: http://jsfiddle.net/rfaLvuho/.
Use zoom-out and zoom-in back to reproduce.

Answer 1

You can switch to <div> elements for the layout to fix this. I used float in the snippet below but it should work with flex or grid layout as well.
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
chartColors.red,
chartColors.orange,
chartColors.yellow,
chartColors.green,
chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: false
}
};
var myPie1 = new Chart('chart-area1', config);
var myPie2 = new Chart('chart-area2', config);
.canvas-holder {
width: 50%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="canvas-holder">
<canvas id="chart-area1"></canvas>
</div>
<div class="canvas-holder">
<canvas id="chart-area2"></canvas>
</div>