Chartjs-Is there a way to change the date format in php?

by

0👍

✅

This issue is best handled in the frontend rather than in the backend.

You should deine your xAxis as a time cartesian axis as follows.

options: {
  ...
  scales: {
    xAxes: [{
      type: 'time',
      time: {
        parser: '', // define date format that matches the php data
        unit: 'day',
        displayFormats: {
          day: 'D-M-YYYY'
        },
        tooltipFormat: 'D-M-YYYY'
      }
      ...
    }]
  }
  ...
}

See Moment.js to find out about format strings that may be used for time.parser, time.displayFormats and time.tooltipFormat.

Note that Chart.js internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.

0👍

UPDATE:
i’ve managed to have it display correctly! this is the updated chart: I did not need the parser, it understood without what needed to be passed through.

  var ctx = document.getElementById("recentChart").getContext('2d');
 var recentChart = new Chart(ctx, {
     type: 'bar',
     data: {
         labels: [],
         datasets: [{
             label: 'hours',
             data: [],
             barThickness: 12,
             fill: true,
             backgroundColor: "rgba(54, 162, 235, 1)",
             borderColor: "rgba(54, 162, 235, 1)",
             borderWidth: 1,
         }]
     },
     options: {
         animation: {
             duration: 1000,
             easing: "linear",
         },
         responsive: true,
         maintainAspectRatio: true,
         legend: {
             display: false,
             position: 'bottom',
             usePointStyle: true,
             labels: {
                 fontColor: "grey",
                 usePointStyle: true,
             },
         },
         scales: {
             yAxes: [{
                 gridLines: {
                     display: true,
                     borderDash: [8, 4],
                 },
                 scaleLabel: {
                     display: true,
                     labelString: 'hours',
                 },
                 ticks: {
                     beginAtZero: false,
                 }
             }],
             xAxes: [{
                 type: 'time',
                 time: {
                     unit: 'day',
                     displayFormats: {
                                 day: 'DD-MM-YYYY'
                             },
                 },
                 gridLines: {
                     scaleShowVerticalLines: false,
                     display: false,
                 },
                 ticks: {
                     beginAtZero: true,

                 }
             }]
         },
     }
 });

dates now show up correctly and not from 1970.

Leave a comment