Just like the title says. I have a chart that when I open the page it keeps getting bigger and bigger and bigger. I genuinely don’t understand why because I have another plot pretty similar with the same html/css.
Here’s the chart:
new Chart(
document.getElementById("weeklyWatched_id"),
{
type: 'bar',
data: {
labels: filteredData.map(row => row.week_number),
datasets: [
{
data: filteredData.map(row => row.weekly_quantity),
backgroundColor: 'rgb(255, 0, 0)',
borderWidth: 0
}
]
},
options: {
title: {
display: true,
text: 'Data Semanal',
fontColor: '#131313', // Change title color
fontFamily: 'Arial' // Change title font to Arial
},
legend: { display: false },
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: { display: false, beginAtZero: true }, // Remove y-axis text
gridLines: { display: false } // Remove y-axis grid lines
}],
xAxes: [{
ticks: { display: false }, // Remove x-axis text
gridLines: { display: false } // Remove x-axis grid lines
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
const value = tooltipItem.value;
const weekNumber = data.labels[tooltipItem.index];
const weekRange = filteredData[tooltipItem.index].week_range;
const peliText = value <= 1 ? ' Peli' : ' Pelis';
return `${value}${peliText}n${weekNumber} Sem.n${weekRange}`;
}
},
displayColors: false
},
layout: { padding: 20 }
}
}
);