[Chartjs]-ChartJS with dates on the X axis not displaying any graph

by

3👍

✅

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.

Leave a comment