adjust canvas height

This commit is contained in:
Paul Gauthier 2024-08-15 13:27:35 -07:00
parent db5dbb5d13
commit c3fcaeac5e
2 changed files with 7 additions and 19 deletions

View file

@ -1,6 +1,4 @@
<div id="chartContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
<canvas id="passRateChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
</div>
<canvas id="passRateChart" width="800" height="400" style="margin-bottom: 20px"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
@ -109,12 +107,8 @@ document.addEventListener('DOMContentLoaded', function () {
// Adjust chart height based on screen width
function adjustChartHeight() {
var container = document.getElementById('chartContainer');
if (window.innerWidth < 600) {
container.style.paddingBottom = '75%'; // Increase height on small screens
} else {
container.style.paddingBottom = '50%'; // Default height
}
var container = document.getElementById('passRateChart');
container.height = 600;
}
// Call the function initially and on window resize

View file

@ -1,7 +1,5 @@
<div id="syntaxErrorsContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
<canvas id="syntaxErrorsChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
</div>
<canvas id="passRateChart" width="800" height="400" style="margin-bottom: 20px"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function () {
var ctx = document.getElementById('syntaxErrorsChart').getContext('2d');
@ -108,12 +106,8 @@ document.addEventListener('DOMContentLoaded', function () {
// Adjust chart height based on screen width
function adjustChartHeight() {
var container = document.getElementById('syntaxErrorsContainer');
if (window.innerWidth < 600) {
container.style.paddingBottom = '75%'; // Increase height on small screens
} else {
container.style.paddingBottom = '50%'; // Default height
}
var container = document.getElementById('passRateChart');
container.height = 600;
}
// Call the function initially and on window resize