[Chartjs]-Chart.JS Time Axis Not Parsing

by

0👍

✅

The scales are part of the options object, if you place it in the options it works just fine:

document.addEventListener("DOMContentLoaded", function() {
  var weeklyHistoryChartEl = document.getElementById('weeklyHistory').getContext('2d');
  var weeklyHistoryChart = new Chart(weeklyHistoryChartEl, {
    type: 'line',
    options: {
      scales: {
        x: {
          type: 'time',
          parsing: false
        }
      }
    }
  });
  weeklyHistoryChart.data = JSON.parse('{"datasets":[{"data":[{"x":1625443200,"y":11.74},{"x":1626048000,"y":12.43},{"x":1626652800,"y":34.18}],"label":"Hike","hidden":true},{"data":[{"x":1624233600,"y":5.27},{"x":1630281600,"y":7.32}],"label":"Kayaking","hidden":true},{"data":[{"x":1626652800,"y":17.99}],"label":"NordicSki","hidden":true},{"data":[{"x":1623024000,"y":9.98},{"x":1623628800,"y":15.97},{"x":1624233600,"y":29.07},{"x":1624838400,"y":57.26},{"x":1625443200,"y":15.87},{"x":1627257600,"y":40.73},{"x":1627862400,"y":29.87},{"x":1628467200,"y":58.87},{"x":1629072000,"y":7.62},{"x":1629676800,"y":21.52},{"x":1630281600,"y":6.03}],"label":"Ride","hidden":true},{"data":[{"x":1628467200,"y":0}],"label":"RockClimbing","hidden":true},{"data":[{"x":1623628800,"y":92.45},{"x":1624233600,"y":31.24},{"x":1624838400,"y":23.81},{"x":1625443200,"y":9.39},{"x":1626048000,"y":40.94},{"x":1626652800,"y":12.84},{"x":1627257600,"y":33.59},{"x":1627862400,"y":30.97},{"x":1628467200,"y":31.88},{"x":1629072000,"y":27.88},{"x":1629676800,"y":47.23},{"x":1630281600,"y":48.1}],"label":"Run","hidden":false},{"data":[{"x":1627862400,"y":30.2},{"x":1628467200,"y":36.24},{"x":1629676800,"y":85.58},{"x":1630281600,"y":52.81}],"label":"VirtualRide","hidden":true},{"data":[{"x":1623024000,"y":6.78},{"x":1626048000,"y":5.92}],"label":"Walk","hidden":true},{"data":[{"x":1623628800,"y":0},{"x":1628467200,"y":0}],"label":"Yoga","hidden":true}]}');
  weeklyHistoryChart.update();
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js"></script>

<canvas id="weeklyHistory"></canvas>

https://codepen.io/leelenaleee/pen/MWojOwv

Leave a comment