Chartjs-How to create a scatter plot where x-axis represents a day by hours with datetime object? chartJS

by

1👍

When using scatter charts, you don’t define labels but define the data as an array of objects containing x and y properties each.

Further you need to define the xAxis as a time cartesian axis.

Please note that Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

Please have a look at below runnable code snippet.

var myChart = new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: "05:22", y: 12 },
        { x: "12:13", y: 19 },
        { x: "13:45", y: 3 },
        { x: "18:31", y: 5 },
        { x: "19:05", y: 2 },
        { x: "22:55", y: 3 }
      ],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      pointRadius: 8,
      pointHoverRadius: 8
    }]
  },
  options: {
    responsive: true,
    legend: {
        display: false
    },
    scales: {      
      xAxes: [{     
        type: 'time',
        time: {
          parser: 'HH:mm',
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'HH:mm'   
          },          
          tooltipFormat: 'HH:mm'          
        },
        ticks: {
          min: '00:00',
          max: '24:00',
          callback: (value, index) => index == 24 ? '24:00' : value
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 5
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Leave a comment