CODEWITHSUNDEEP
javascriptmomentjschart.js
Sean Anderson
Sean Anderson

Reputation: 29251

ChartJS shows date, but not time, when displaying labels in time axis

I am attempting to create a line chart whose x axis represents time. I am overriding ChartJS' displayFormats to ensure that the full timestamp is shown at each label, but also so that it is of the format I expect.

Here's my code:

var chart = new Chart($('#myChart'), {
  type: 'line',
  data: {
    labels: ['2016-09-05T09:29:06', '2016-10-04T09:29:06'],
    datasets: [{
      label: 'foo',
      data: [1, 4]
    }]
  },
  options: {
      scales: {
        xAxes: [{
          type: 'time',
          time: {
            displayFormats: {
              millisecond: 'DD/MM/YYYY HH:mm:ss',
              second: 'DD/MM/YYYY HH:mm:ss',
              minute: 'DD/MM/YYYY HH:mm:ss',
              hour: 'DD/MM/YYYY HH:mm:ss',
              day: 'DD/MM/YYYY HH:mm:ss',
              week: 'DD/MM/YYYY HH:mm:ss',
              month: 'DD/MM/YYYY HH:mm:ss',
              quarter: 'DD/MM/YYYY HH:mm:ss',
              year: 'DD/MM/YYYY HH:mm:ss'
            },
            tooltipFormat: 'DD/MM/YYYY HH:mm:ss'
          }
        }]
      }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.js"></script>
<canvas id="myChart" width="400" height="400"</canvas>

Note that the error in the snippet appears to be introduced by SO and is unrelated to the issue at hand.

When interacting with the chart above, you'll note that the tooltip displays the properly formatted timestamp. So, I believe my suggested formatter is correct and the information is available within ChartJS.

Question:

The x-axis only displays the date of the label. The time portion of the label is dropped and is represented as zeros. Why? How can I show the full time?

Upvotes: 2

Views: 1869

Answers (1)

Sean Anderson
Sean Anderson

Reputation: 29251

I am an idiot.

When representing the x-axis as a time scale the labels go from attempting to 1:1 correspond with a datapoint to broad generalizations of what date/time it is. ChartJS has rounded to the nearest day and thus is at 00:00:00 for time.

Upvotes: 1

Related Questions