Resolution
To ensure responsiveness in the provided code, I implemented two adjustments.
1. CSS Modifications
I opted to set the display property of the parent element .charts to block and assigned a margin-bottom of 20px to the .chart canvas container (considering that grid-gap was not an option).
Therefore, around line 207 in style.css, I made the following alteration:
.charts {
grid-template-columns: 1fr;
}
changed to:
.charts {
/* grid-template-columns: 1fr; */
display: block;
}
.chart {
margin-bottom: 20px;
}
2. JavaScript Adjustments
I encapsulated all your chart setup code within a function called drawChart, which is invoked upon window resizing. Prior to rendering a new chart, any existing chart is first removed to prevent errors. The JavaScript code was adjusted as follows:
let myChart;
let myChart2;
const drawCharts = () => {
if (myChart) {
myChart.destroy();
}
const ctx = document.getElementById('lineChart').getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',],
datasets: [{
label: 'Earnings in $',
data: [2500, 3452, 1526, 5500, 1278, 2500, 2500, 3000, 4000, 3300, 2600, 2800],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 3
}]
},
options: {
responsise: true,
}
});
if (myChart2) {
myChart2.destroy();
}
const ctx2 = document.getElementById('doughnut').getContext('2d');
myChart2 = new Chart(ctx2, {
type: 'doughnut',
data: {
labels: ['Academic', 'Non academic', 'Administration', 'Others'],
datasets: [{
label: 'Employees',
data: [42, 12, 8, 6],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
};
drawCharts();
window.onresize = drawCharts;
Elaboration
In identifying potential constraints, I heavily relied on Chrome DevTools, as highlighted by @AHaworth in the comments section.
I concluded that using display: grid; was redundant for smaller screens, prompting me to change the parent element .charts to display: block;.
Furthermore, it appeared that chart.js calculates chart dimensions based on the current parent size. Hence, with window resizing, reconstructing the chart became imperative, leading to the integration of the callback function.
Implement these alterations and assess the outcome against your requirements.
I cannot explain why the original code worked seamlessly for the YouTuber without incorporating the aforementioned changes.