I'm attempting to use Chart.js to create a specific diagram.
Current Challenges:
- The point on the x-axis should be centered within the categories.
- I would like the value to appear above the point.
https://i.sstatic.net/FFFr1.png
This is what my code looks like so far:
new Chart(ctx, {
type: 'line',
data: {
labels: ['Buy', 'Sell'],
datasets: [
...grid.pairs.map(pair => {
return {
data: [pair.buyPrice, pair.sellPrice],
borderColor: '#0d6efd',
backgroundColor: '#0d6efd',
pointRadius: [3, 5],
}
}),
{
label: 'Market Price',
data: [grid.marketPrice, grid.marketPrice],
borderColor: 'red',
backgroundColor: 'red',
}
]
},
options: {
scales: {
x: {
},
y: {
title: {
display: true,
text: 'Price in Euro'
},
}
},
}
})
If anyone could offer some assistance with this, it would be greatly appreciated.