[Chartjs]-Chart JS not working with date

by

4👍

✅

When using Time Cartesian Axis Chart.js need also moment.js library;
check http://www.chartjs.org/docs/latest/getting-started/installation.html#stand-alone-build.

var options = {
  type: 'scatter',
  data: {
    datasets: [{
      label: "Server 2",
      backgroundColor: "rgba(196, 93, 105, 0.3)",
      showLine: true,
      data: [{
          x: new Date(),
          y: "15.375"
        },
        {
          x: '2018-03-10',
          y: "25.375"
        }
      ]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'day'
        }
      }],
      yAxes: [{}]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas { background-color : #eee;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>


<canvas id="chartJSContainer" width="600" height="400"></canvas>

Leave a comment