[Chartjs]-How to use dates as X axis with Chart.js even when there is no Y axis value related

by

2👍

From your code I see that you tried different approaches, including ticks.autoskip and ticks.maxTicksLimit. Both of these option limit the number of tick labels if required but don’t guarantee that the last label corresponds to the last data point.

To solve this in a clean way, you have to implement your own ticks.maxTicksLimit on the xAxis. This can be done in the following way.

  1. Generate a labels array out of the times contained in your data. This array should contain the data start and end time and the specified number of equally spread times between both (see function createLabels in your amended code below).
  2. Tell Chart.js to generates ticks on the xAxis from given labels by defining tick.sources: 'labels'.
const data = [
  { t: new Date("2015-3-15 13:30"), y: 12 },
  { t: new Date("2015-3-25 13:20"), y: 21 },
  { t: new Date("2015-3-26 13:20"), y: 21 },
  { t: new Date("2015-3-27 13:20"), y: 21 },
  { t: new Date("2015-5-14 13:20"), y: 21 },
  { t: new Date("2015-7-25 14:12"), y: 32 },
  { t: new Date("2015-08-01 14:12"), y: 40 },
  { t: new Date("2015-08-10 14:12"), y: 40 },
  { t: new Date("2015-08-11 14:12"), y: 40 },
  { t: new Date("2015-09-20 14:12"), y: 40 }
];

function createLabels(maxTicksLimit) {
  const times = data.map(o => o.t.getTime());
  const startTime = times[0];
  const endTime = times[times.length -1];
  const tickGap = ( endTime - startTime) / (maxTicksLimit - 1);
  const labels = [startTime];
  for (let i = 1; i < maxTicksLimit - 1; i++) {
    labels.push(startTime + i * tickGap);
  }
  labels.push(endTime);
  return labels;
}

var myChart = new Chart(document.getElementById("examChart"), {
  type: 'line',
  data: {
    labels: createLabels(12),
    datasets: [{
      label: 'Demo',
      fill: false,
      data: data,
      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)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          source: 'labels',
          minRotation: 45
        },
        time: {
          unit: 'day',
          displayFormats: {
            day: 'DD/MM/YYYY'
          },
          tooltipFormat: 'DD/MM/YYYY'
        }
      }],
      yAxes: [{
        ticks: {
          suggestedMin: 0
        },
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'y axis'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<div class="container" style="width:50%;">
  <canvas id="examChart"></canvas>
</div>

Leave a comment