Lap Time

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<canvas id="myChart" width="200" height="200"></canvas>

JavaScript

const times = ["1:32.599", "1:32.300", "1:31.000"];
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['One', 'Two', 'Three'], // list of races,
    datasets: [{
      label: "Best Lap",
      fill: false,
      data: times,
    }]
  },
  options: {
    scales: {
      yAxes: [{
        type: 'time',
        time: {
          parser: function(v) {
          	console.log(v);
            var m = moment(v, 'm:s.SSS');
            return m;
          },
          unit : 'seconds',
          unitStepSize: 5,
          min: '1:0.0',
          max: '2:0.0',
          displayFormats: {
            'seconds': 'm.s'
          }
        }
      }]
    }
  }
});