0
348
VistasHow can I format the x-axis using a timestamp via chart.js?
I am wanting to display the temperature readings from a database on a graph. However, at the moment the x-axis is displaying incorrect values that do not correspond with my test dataset.
The x-axis is meant to be in the time domain using timestamps, instead, the graph uses each character from the label 'Reddd' as a value for the x-axis.
The y-axis is correct and corresponds to the test data points.
The function below includes the javascript code for constructing the graph.
function makeGraph() {
const ctx = document.getElementById('canvas').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: 'Reddd',
datasets: [{
label: 'Temperature',
data: [{"x": 1647281788963, "y": 22.9}, {"x": 1647281994496, "y": 26.9}, {"x": 1647282200029, "y": 21.9}, {"x": 1647282405562, "y": 24.9}, {"x": 1647282611094, "y": 28.9}],
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 2
}]
},
options: {
scales: {
x: {
type: 'time',
time: {
// Luxon format string
tooltipFormat: 'DD T'
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
display: true,
text: 'value'
}
}
}
}
});
}
This is the output of the graph:
If I dont include a string after the labels: statment, the graph will look this:
1 Respuestas
Responde la pregunta0
First, you must not define data.labels.
Further, the x-axis could be defined as follows:
x: {
type: 'time',
time: {
unit: 'minute',
displayFormats: {
minute: 'DD T'
},
tooltipFormat: 'DD T'
},
...
Please take a look at your amended and runnable code below and see how it works.
new Chart('canvas', {
type: 'line',
data: {
datasets: [{
label: 'Temperature',
data: [
{"x": 1647281788963, "y": 22.9},
{"x": 1647281994496, "y": 26.9},
{"x": 1647282200029, "y": 21.9},
{"x": 1647282405562, "y": 24.9},
{"x": 1647282611094, "y": 28.9}
],
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 2,
tension: 0.5
}]
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'minute',
displayFormats: {
minute: 'DD T'
},
tooltipFormat: 'DD T'
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
display: true,
text: 'value'
}
}
}
}
});<script src="https://cdn.jsdelivr.net/npm/chart.js@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
<canvas id="canvas" height="120"></canvas>