Chartjs-ChartJS Print several points between a range of time

by

1👍

You could use time cartesian axis as index axis. In this way you should achieve your goal. The data has been sorted, ascendingly.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
           data: [
             {x: '10:30', y: 20},
             {x: '10:44', y: 20},
             {x: '11:11', y: 20},
             {x: '11:30', y: 20},
             {x: '11:44', y: 20},
             {x: '12:35', y: 20},
             {x: '13:30', y: 20},
             {x: '14:30', y: 20},
          ],
          borderColor: 'red',
          pointRadius: 5
        }]
    },
    options: {
      plugins: {
        legend: false
      },
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'hour',
            paser: 'HH:mm'
          }
        }
      }
    }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.0.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.2.0/dist/chartjs-adapter-luxon.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

Leave a comment