Chart.js - Time series line chart

When you want to draw time series charts with ChartJS, you need to include Moment.js library. Otherwise, you will get the following error message:

Uncaught Error: This method is not implemented: either no adapter can be found or an incomplete integration was provided.

The code example below shows you how to draw simple time series chart. You simply need to set the type of xAxes as time.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
 
    <title>Chart.js - Time series line chart</title>
</head>
<body>
    <canvas id="my-simple-chart"></canvas>
</body>
 
<script>
var data1 = {
    label: 's1',
    borderColor: 'blue',
    data: [
            { x: '2017-01-06 18:39:30', y: 50 },
            { x: '2017-01-15 18:39:28', y: 91 },
            { x: '2017-03-07 18:39:28', y: 150 },
        ]
};
 
var ctx = document.getElementById('my-simple-chart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: { datasets: [data1] },
  options: {
    scales: {
      xAxes: [{
        type: 'time'
      }]
    }
  }
});
</script>
</html>

Chart.js

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.