I am trying to program a isotopic pattern calculator and want do visualize the resulting pattern, which should look something like this: [isotopic pattern][1]
Therefore, I thought about using a bar chart and chart.js. However, all examples I've found do have months or years for labeling the x-axis. But I would need a "normal" x-axis as used for the scattering chart type so that the bars are included there in between numbers and not always directly above the label.
Can this be done using chart.js (or an alternative)?
Thanks, celdri [1]: https://i.stack.imgur.com/Jqtl8.png
You can make the scale a linear scale and just provide the x and y as coordinates.
var options = {
type: 'bar',
data: {
datasets: [{
label: 'Nice label',
data: [{
x: 10,
y: 5
}, {
x: 13,
y: 3
}, {
x: 20,
y: 8
}, {
x: 22,
y: 15
}],
backgroundColor: 'pink'
}]
},
options: {
scales: {
x: {
type: 'linear',
ticks: {
maxTicksLimit: 4
},
grid: {
display: false
}
},
y: {
grid: {
display: false
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>