[Chartjs]-In Chart.js >3.0, on axis of type time, how to show labels and ticks only for existing data points (make labels reflect data)?

by

2👍

✅

Here is the solution.

You need to add the ticks source to data.

Reference documenation here

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- import chartjs -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1" crossorigin="anonymous"></script>
    <!-- import luxon for working with datetimes -->
    <script src="https://cdn.jsdelivr.net/npm/luxon@1.26.0" crossorigin="anonymous"></script>
    <!-- import luxon adpater for integration with chartjs -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.0.0/dist/chartjs-adapter-luxon.min.js" crossorigin="anonymous"></script>
</head>
<style type="text/css">
.chart {
    width: 600px !important;
    height: 600px !important;
}
</style>

<body>
    <div class="chart"><canvas id="chartjs"></canvas></div>
    <script type="text/javascript">
    var ctx = document.getElementById("chartjs").getContext("2d");

    // Datetimes to display on chart
    let datetimes = [luxon.DateTime.utc(2000, 1, 1, 0, 5), luxon.DateTime.utc(2000, 1, 1, 4, 11), luxon.DateTime.utc(2000, 1, 1, 12, 38), luxon.DateTime.utc(2000, 1, 1, 15, 10), luxon.DateTime.utc(2000, 1, 1, 18, 41), luxon.DateTime.utc(2000, 1, 1, 22, 2)];

    // Create an array of ISO strings
    let datetimes_isos = [];
    datetimes.forEach(function(item, index, array) {
        datetimes_isos.push(item.toISO());
    });

    // Chart's data
    let data = [{ x: datetimes_isos[0], y: 0 }, { x: datetimes_isos[1], y: 10 }, { x: datetimes_isos[2], y: 20 }, { x: datetimes_isos[3], y: 40 }, { x: datetimes_isos[4], y: 50 }, { x: datetimes_isos[5], y: 60 }];

    const chartData = {
        labels: datetimes_isos,
        datasets: [{ data: data }]
    };

    const config = {
        type: 'line',
        data: chartData,
        options: {
             scales: {
              x: {
                  type: 'time',
                  ticks:{
                    source:'data'
                  },
                  time: {
                  unit: "minute"
                  },
              }
          },
        },
    };

    var theChart = new Chart(ctx, config);
    </script>
</body>

</html>

Leave a comment