title: JavaScript - Convert dates and times (Chart.js and Moment.js)
body: <p><strong>If</strong> you have a better solution (perhaps a D3 solution for this problem): your answer will be appreciated!</p>
  
  <p>I'm new to Chart.js and despite reading the docs of both Chart.js and Moment.js over and over again, I don't seem to possess the skills needed to create the chart I'd like to create.</p>
  
  <p>That said, I have two arrays: one for the <code>y-axis</code> and one for the <code>x-axis</code>.</p>
  
  <p>You can review, edit, fork and all that <strong><a href="https://codepen.io/DerkJanS/pen/xrzJvg" rel="nofollow noreferrer">here on codepen</a></strong>.</p>
  
  <p>It looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/rNOkd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rNOkd.png" alt="enter image description here"></a></p>
  
  <p>Now this looks fine, but like I said, I don't seem to possess the <code>Moment.js</code> skills to convert those hundreths of a second to a good looking: <strong><code>2:31.70</code></strong><code>(mm:ss:SS)</code> or <strong><code>23.76</code></strong><code>(ss:SS)</code> or <strong><code>1:58.43.20</code></strong><code>(HH:mm:ss:SS)</code>.</p>
  
  <p>Next to the time in hundreths being coverted to a normal time, readable for humans. The date is not quite good looking as well. I'd like to be able to convert this date to a local language and custom format. You may paste your codepen link in your answer. Or if you have any other good examples, that's highly appreciated as well!</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;canvas id="myChart" width="auto" height="100"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>var ctx = document.getElementById("myChart").getContext("2d");
  
  var myLineChart = new Chart(ctx, {
      type: "line",
      data: {
          labels: [
              // x-axis array containing dates as String in YYYY-MM-DD format
              // e.g. 2009-04-11 (April 11, 2009)
          ],
          datasets: [
              {
                  label: "time",
                  backgroundColor: "transparent",
                  borderColor: "#0088d4",
                  data: [
                      // y-axis array containing times as int in one hundredth of a second
                      // e.g.: 15170 (2 minutes, 31 seconds and 70 hundreth of a second)
                  ]
              }
          ]
      },
      options: {
          elements: {
              line: {
                  tension: 0
              }
          },
          scales: {
              yAxes: [
                  {
                      ticks: {
                          stepSize: 1,
                          callback: function(tickValue, index, ticks) {
                              if (!(index % parseInt(ticks.length / 5))) {
                                  return tickValue;
                              }
                          }
                      }
                  }
              ]
          }
      }
  });
  </code></pre>