Даты сетки Chart.js 4.5.1 не совпадают с данными ⇐ Javascript

[Anonymous]

Я показываю баланс банковского счета на диаграмме, созданной с помощью Chart.js.
Используемое мной окно довольно маленькое, и я обнаружил, что сетка и точки данных не совпадают по оси X.
На снимке экрана ниже можно увидеть выделенную январскую транзакцию, но если посмотреть на сетку, похоже, что это февраль.
Могу ли я изменить некоторые настройки, чтобы сетка совпадала с данные?


Мне не удалось заставить работать фрагмент кода переполнения стека, но вот Codepen:
https://codepen.io/thomasa88/pen/ByzgYLp
Изменить: изначально диаграмма представляет собой полосовую и линейную диаграмму, но я удалил столбцы, чтобы уменьшить размер примера.

Код: Выделить всё

    let combinedTransactions = [
{ date: new Date('2024-01-01'), balanceAfterCents: 100000 },
{ date: new Date('2024-01-10'), balanceAfterCents: 105000 },
{ date: new Date('2024-01-28'), balanceAfterCents: 102000 },
{ date: new Date('2024-01-31'), balanceAfterCents: 102000 },
{ date: new Date('2024-02-01'), balanceAfterCents: 100000 },
{ date: new Date('2024-02-04'), balanceAfterCents: 110000 },
{ date: new Date('2024-02-10'), balanceAfterCents: 108000 },
{ date: new Date('2024-02-20'), balanceAfterCents: 115000 },
{ date: new Date('2024-03-01'), balanceAfterCents: 120000 },
{ date: new Date('2024-03-15'), balanceAfterCents: 118000 },
{ date: new Date('2024-03-30'), balanceAfterCents: 125000 },

];

let dates = combinedTransactions.map(tx => tx.date);

let canvas = document.getElementById('graph');

new Chart(canvas, {
type: 'bar',
data: {
labels: dates,
datasets: [
{
_id: 'balance',
label: 'Kontosaldo',
data: combinedTransactions.map(tx => tx.balanceAfterCents / 100),
type: 'line',
borderColor: '#2196F3',
backgroundColor: 'rgba(33, 149, 243, 0.7)',
pointRadius: 0,
order: 1,
trendlineExponential: {
colorMin: '#ff6b6b',
colorMax: '#ff6b6b',
width: 2,
lineStyle: 'dashed',
// label: {
//     text: 'Exponential Trend',
//     display: true,
//     displayValue: true,
//     color: '#ff6b6b',
//     font: {
//         size: 12,
//         family: 'Arial',
//     },
//     offset: 10,
// },
}
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: 'time',
time: {
unit: 'day',
displayFormats: {
month: 'MMM yyyy',
day: 'd/M',
},
tooltipFormat: 'yyyy-MM-dd'
},
grid: {
color: line => { console.log(line); return (line.tick?.major ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.1)') }
},
ticks: {
source: 'auto',
major: {
// Major tick is months for dates
enabled: true,
},
font: (ctx) => {
return { weight: ctx.tick?.major ? 'bold' : '' }
}
},
// title: {
//   display: true,
//   text: 'Datum'
// }
},
y: {
beginAtZero: false,
// stacked: true,
grid: {
color: line => (line.tick.value === 0 ? 'black' : 'rgba(0, 0, 0, 0.1)')
}
}
},
interaction: {
mode: 'index',
intersect: false,
},
plugins: {
tooltip: {
callbacks: {
label: (ctx) =>  {
let valFormat =
{
style: 'currency',
currency: 'SEK'
};
let labels = '';
if (ctx.dataset.stack === 'transactions') {
valFormat.signDisplay = 'exceptZero';

let txs;
if (ctx.dataset._id === 'deposits') {
txs = combinedTransactions[ctx.dataIndex].deposits;
} else {
txs = combinedTransactions[ctx.dataIndex].withdrawals;
}
labels = txs.map(tx =>
new Intl.NumberFormat('sv-SE', valFormat).format(tx.amountCents / 100)
+ ' ' + tx.description);
} else {
labels = new Intl.NumberFormat('sv-SE', valFormat).format(ctx.parsed.y);
}
return labels;
}
}
},
},
}
});

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/798 ... -with-data