Chartjs-Chart.js time series showing empty plot

by

0👍

As palaѕн commented, you don’t correctly retrieve the 2D-Context. This should look as follows.

var ctx = document.getElementById('myChart').getContext('2d');

Further the data object needs to be defined in a different way.

data: {
  datasets: [{
    data: data1
  }]
},

Please have a look at your amended code below.

var data1 = [{
  x: new Date("2020-01-01 18:00:00"),
  y: 1
}, {
  x: new Date("2020-01-02 18:00:00"),
  y: 2
}, {
  x: new Date("2020-01-03 18:00:00"),
  y: 3
}];

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',  
  data: {
    datasets: [{
      data: data1
    }]
  },
  data1,
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        },
        distribution: 'linear',
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>

Leave a comment