Chartjs-How to display specific time label in x-axis by Chart.js?

by

0👍

✅

You can define the x-axis as a time cartesian axis as follows:

scales: {
  x: {
    type: 'time',
    time: {
      parser: 'HH:mm:ss',
      unit: 'hour',
      displayFormats: {
        hour: 'HH:mm'
      },
      tooltipFormat: 'D MMM YYYY - HH:mm:ss'
    }
  }
}

Please take a look at your amended code below and see how it works. This code now uses the chartjs-adapter-moment together with moment. Feel free to use a different adapter.

$(function() {
  getXlsxData();
});

function getXlsxData() {
  var xlsxUrl =
    "https://script.google.com/macros/s/AKfycbw9PQRojIml3x5gnMMiKihnTh9aLODd86ankhoz0ETIu0a8tcVh1ZIc4R08hlw8nHF8pA/exec?id=1Bvzqyu_NvPdL-zsOShbKF5me2bjtVVWQCK9MDA2KW58&sheet=Today"
  var xlsxData = $.getJSON(xlsxUrl, function(data) {
    $.each(data.Today, function(i, el) {
      labels.push(el.Time);
      TodayTemperature.push(el.CurrentTemp);
      TodayRH.push(el.CurrentRH);
    });
    load_chart();
  });
}
var labels = [],
  TodayTemperature = [],
  TodayRH = []

function load_chart() {
  var myChart = new Chart('alldata', {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'Temperature（°C）',
        fill: false,
        data: TodayTemperature,
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132, 0.8)',
        borderWidth: 1,
        radius: 0,
      }, {
        label: 'Relative Humidity （%）',
        fill: false,
        data: TodayRH,
        backgroundColor: 'rgb(255, 159, 64)',
        borderColor: 'rgb(255, 159, 64, 0.8)',
        hidden: true,
        borderWidth: 1,
        radius: 0,
      }, ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        position: 'bottom',
      },
      layout: {
        padding: {
          top: 35,
          right: 15,
        }
      },
      scales: {
        x: {
          type: 'time',
          time: {
            parser: 'HH:mm:ss',
            unit: 'hour',
            displayFormats: {
              hour: 'HH:mm'
            },
            tooltipFormat: 'D MMM YYYY - HH:mm:ss'
          }
        }
      }
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0"></script>
<canvas id="alldata" height="200"></canvas>

Leave a comment