I've been attempting to create a scatter plot with Chart.js using some data, but no matter what I try from various internet resources, the x-axis continues to display as integers instead of dates. Here's a screenshot for reference.
UPDATE: I discovered that when I remove the square brackets around the axis properties, as suggested in the documentation, I encounter an error (
Uncaught Error: This method is not implemented: Check that a complete date adapter is provided.
). On the other hand, when I include the square brackets, the properties are not being recognized.
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45262d2437316b2f3605766b716b74">[email protected]</a>/dist/chart.min.js"></script>
<canvas id="mychart"></canvas>
<script>
data = [{
x: new Date("2017-01-20"),
y: 43
}, {
x: new Date("2017-01-21"),
y: 45
}, {
x: new Date("2017-01-22"),
y: 120
}, {
x: new Date("2017-01-23"),
y: 100
}]
let options = {
scales: {
yAxes: [{ticks: {min: 0}}],
xAxes: [{
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'MMM DD'
}
}],
},
};
let chartData = {
//labels: labels,
datasets: [{
data: data,
label: 'Amount of Stuff',
backgroundColor: '#fffff',
}]
};
let ctx = document.getElementById('mychart').getContext('2d');
new Chart(ctx, {
data: chartData,
type: 'scatter',
options: options,
});
</script>
The current output looks like this: