ChartJS with dates on the X axis not displaying any graph - chart.js

Question

I have a Vue.JS project getting data from a REST API (mine, so I can modify it if needed). This data is formatted for Chart.JS.
I am supposed to display a graph with 3 datasets, 2 of type line with the same X values, but 1 of type bar with different X values (that's why I don't want to specify labels). Whatever, all the X values are dates, so I would like only 1 X axis for all the curves.
I am using datasets with (x,y) data format :
x is an ISO8601 date
y is a float
My problem is that NOTHING is displayed at all...could anyone help me please, I don't understand why. I feel like having done things right. I saw somewhere that I needed to include momentjs, but in the official documentation they say that it is not the case. I bet that the problems come from the dates because I tried changing the y values, and the 2 y axis bounds are modified (so y values are understood). I also tried addind the "xAxisID" option, nothing changed.
Here is a sample of my data (normally hundreds of values) :
{
"type": "line",
"data": {
"datasets": [
{
"label": "Température",
"borderColor": "red",
"backgroundColor": "red",
"fill": false,
"data": [
{
"x": "2020-07-05T15:38:47.933711",
"y": 2.8224692
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 33.63129
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 40.540405
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 3.0312533
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 49.145626
}
],
"yAxisID": "yAxeTemperature"
},
{
"label": "Humidité",
"borderColor": "blue",
"backgroundColor": "blue",
"fill": false,
"data": [
{
"x": "2020-07-05T15:38:47.933711",
"y": 33.980587
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 2.0313625
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 24.249685
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 7.4426904
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 2.6335742
},
{
"x": "2020-07-05T16:28:48.175547",
"y": 25.92827
}
],
"yAxisID": "yAxeHumidite"
}
]
},
"options": {
"responsive": true,
"hoverMode": "index",
"stacked": false,
"title": null,
"scales": {
"xAxes": [
{
"type": "time",
"display": true,
"position": "bottom",
"id": "xAxeTime",
"scaleLabel": {
"display": true,
"labelString": "Temps",
"fontColor": "black"
},
"time": {
"unit": "minute",
"parser": "moment.ISO_8601",
"tooltipFormat": "ll"
}
}
],
"yAxes": [
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeTemperature",
"scaleLabel": {
"display": true,
"labelString": "Température",
"fontColor": "red"
}
},
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeHumidite",
"scaleLabel": {
"display": true,
"labelString": "Humidité",
"fontColor": "blue"
}
}
]
}
}
}
Here is how my chart is created (using vue-chartjs and chart.js) :
createChart(chartId : string, chartData : GrapheBean) {
const ctx = document.getElementById(chartId);
// #ts-ignore
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
Here is the result :
I am stuck now, even if still trying things with little hope. Thanks a lot in advance for the ones who could help me.

Answer 1

First you should remove the option xAxes.time.parser. It is not needed when the dates are of ISO8601 format.
Further Chart.js effectively internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
Please have a look at your amended code in a pure JavaScript version.
const chartData = {
"type": "line",
"data": {
"datasets": [{
"label": "Température",
"borderColor": "red",
"backgroundColor": "red",
"fill": false,
"data": [{
"x": "2020-07-05T15:38:47.933711",
"y": 2.8224692
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 33.63129
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 40.540405
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 3.0312533
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 49.145626
}
],
"yAxisID": "yAxeTemperature"
},
{
"label": "Humidité",
"borderColor": "blue",
"backgroundColor": "blue",
"fill": false,
"data": [{
"x": "2020-07-05T15:38:47.933711",
"y": 33.980587
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 2.0313625
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 24.249685
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 7.4426904
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 2.6335742
},
{
"x": "2020-07-05T16:28:48.175547",
"y": 25.92827
}
],
"yAxisID": "yAxeHumidite"
}
]
},
"options": {
"responsive": true,
"hoverMode": "index",
"stacked": false,
"title": null,
"scales": {
"xAxes": [{
"type": "time",
"display": true,
"position": "bottom",
"id": "xAxeTime",
"scaleLabel": {
"display": true,
"labelString": "Temps",
"fontColor": "black"
},
"time": {
"unit": "minute",
// "parser": "moment.ISO_8601", -> remove this line
"tooltipFormat": "ll"
}
}],
"yAxes": [{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeTemperature",
"scaleLabel": {
"display": true,
"labelString": "Température",
"fontColor": "red"
}
},
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeHumidite",
"scaleLabel": {
"display": true,
"labelString": "Humidité",
"fontColor": "blue"
}
}
]
}
}
}
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>
In your question you also wrote "I am supposed to display a graph with 3 datasets, 2 of type line with the same X values, but 1 of type bar with different X values". Your code however only defines 2 datasets. In case you're also facing problems with this point, please post a new question for this separate issue.