I cannot seem to find a way to control these spaces on the side of my chartjs chart. According to the time range, it seems to generate different spaces on the sides. Are there any way to ensure that the axis always cover the entire canvas?
Here are some screenshots of the “spaces” that I want to remove:
Here’s my code configuration so far:
const config = {
type: 'bar',
data: ganttData,
options: {
responsive: true,
maintainAspectRatio: false,
animation: true,
indexAxis: 'y',
scales: {
x: {
min: startTime,
max: endTime,
type: 'time',
time: {
unit: false,
displayFormats: {
second: 'HH:mm:ss',
minute: 'HH:mm',
hour: 'HH:mm',
day: 'MMM D',
week: 'MMM D',
month: 'MMM YYYY',
year: 'YYYY'
},
},
ticks: {
major: {
enabled: true
},
color: 'white',
maxRotation: 0,
minRotation: 0,
includeBounds: false
},
border: {
color: 'rgb(199,199,199)'
},
grid: {
tickLength: 5,
color: 'rgb(199,199,199, 0.1)',
}
},
y: {
beginAtZero: true,
stacked: true,
display: false
}
}
}
};