ARTICLE AD BOX
I show the balance of a bank account in chart created with Chart.js.
The window I use is quite small and I have found that the grid and the data points don't align on the x axis.
In the screenshot below, one can see a highlighted January transaction, but it looks like it is in February when looking at the grid.
Can I change some settings to make the grid align with the data?
I failed to get the Stack overflow codesnippet to work, but here is a 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;
}
}
},
},
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-trendline.min.js"></script>
<!-- Container to allow responsive resizing of the chart -->
<div class="chart-container" style="position: relative; margin: auto; width: 400px; height: 400px;">
<canvas id="graph"></canvas>
</div>
