Im using QuickChart to generate a Gantt chart (using ChartJs v2) and my first x axes tick mark is not showing up. I’ve tried setting the xAxes timeUnit to round:’week’, which gets me a tick on the date but then adds an unwanted week before date. It seems to need the start tick date to be more than week before the actual specified start date, otherwise the tick won’t appear. Is there anyway to get the tick mark to show using ChartJs v2? Unfortunately the process for generating the actual chart is very complicated and I dont have the time to migrate everything over to a newer version of ChartJs. Any help is hugely appreciated!
{
type: 'horizontalBar',
data: {
labels: ['Task 1', 'Task 2', 'Task 3', 'Task 4', 'Task 5', 'Task 6'],
datasets: [{
data: [
[new Date('2024-06-02'), new Date('2024-07-07')],
[new Date('2024-06-02'), new Date('2024-06-06')],
[new Date('2024-06-04'), new Date('2024-06-10')],
[new Date('2024-06-05'), new Date('2024-06-21')],
[new Date('2024-06-10'), new Date('2024-06-16')],
[new Date('2024-06-17'), new Date('2024-07-07')],
],
backgroundColor: ['#60879e'],
barPercentage: 0.4,
fontColor: '#ffffff'
}, ],
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
position: 'top',
type: 'time',
time: {
unit: 'week',
// round: 'week',
displayFormats: {
'week': 'MMM DD',
}
},
gridLines: {
lineWidth: 2,
zeroLineWidth: 4.0,
tickLength: .5,
drawTicks: false,
drawBorder: false,
color: '#8fadad',
},
ticks: {
min: new Date('2024-05-29'),
max: new Date('2024-08-07'),
padding: 10,
fontColor: '#ffffff',
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
fontSize: 15,
fontColor:'#ffffff'
}
},
],
},
},
}
Tried setting time unit to round ‘week’. Also tried setting xAxes bound ‘ticks’, but doesn’t seem supported in ChartJs 2.