Line Graph With Linear Timescale In Chart.js
I'm trying to use Chart.js 3.3.2 to display some a line graph with an equally spaced x date axis. Like the example they give here. I cannot get a simple version of this example wor
Solution 1:
you need to add a date adapter as provided in the 3.x migration guide
(search in the page for "available adapters")
https://www.chartjs.org/docs/latest/getting-started/v3-migration.html
here is a working example
const data = {
labels: [
newDate(86400000), // Day 1newDate(2 * 86400000), // Day 2newDate(3 * 86400000), // Day 3newDate(4 * 86400000), // Day 4newDate(6 * 86400000), // Day 6newDate(7 * 86400000), // Day 7newDate(13 * 86400000), // Day 13
],
datasets: [
{
label: "My First dataset",
data: [1, 3, 4, 5, 6, 7, 8],
},
],
};
let ctx = document.querySelector("canvas").getContext("2d");
let chart = newChart(ctx, {
type: "line",
data: data,
options: {
scales: {
x: {
type: "time",
}
},
},
});<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><scriptsrc="https://cdn.jsdelivr.net/npm/chart.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script><scriptsrc="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script><title>repl.it</title></head><body><canvas></canvas><scriptsrc="new.ts"></script></body></html>
Post a Comment for "Line Graph With Linear Timescale In Chart.js"