Papaparse with chart.js not displaying csv value on the x axis

Question

Currently using papaparse 5.1 and chart.js 3.5.1 together to display 15 min intervals on X axis. This was working in v2 of chart.js but now it won't display 'Time' value of csv on the chart anymore. Instead it is showing 0,2,4,6,8, etc...

Time,8/18/2021,8/19/2021,8/20/2021
0:00,172202,160823,126604
0:15,170955,159931,123954
0:30,170269,159414,121677

Looking at 'return value.toLocaleString();' I think I have something wrong here?

https://i.sstatic.net/ePv16.jpg

$(document).ready(function() {
  $.get('data.csv', {'_': $.now()}, function(csvString) {

    var data = Papa.parse(csvString).data;
    var timeLabels = data.slice(1).map(function(row) { return row[0]; });

    var datasets = [];
    for (var i = 1; i < data[0].length; i++) {
      datasets.push(
        {
          label: data[0][i], // column name
          data: data.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false, // `true` for area charts, `false` for regular line charts
          pointStyle: 'line'
        }
      )
    }

    // Get container for the chart
    var ctx = document.getElementById('chart-container').getContext('2d');

    new Chart(ctx, {
      type: 'line',

      data: {
        labels: timeLabels,
        datasets: datasets,
      },

      options: {
        maintainAspectRatio: false,
        scales: {
          x: {
            title: {
              display: true,
              text: X_AXIS
            },
            grid: {
              display: false,
            },
            ticks: {
              maxTicksLimit: 60,
              callback: function(value, index, values) {
                return value.toLocaleString('en-US');
              }
            }
          },
          y: {
            stacked: false, // `true` for stacked area chart, `false` otherwise
            beginAtZero: true,
            title: {
              display: true,
              text: Y_AXIS
            },
            grid: {
              display: true,
            },
            ticks: {
              maxTicksLimit: 10,
              beginAtZero: true,
              callback: function(value, index, values) {
                return value.toLocaleString()
              }
            }
          }
        },
        tooltips: {
          callbacks: {
            label: function(tooltipItem, all) {
              return all.datasets[tooltipItem.datasetIndex].label
                + ':' + tooltipItem.yLabel.toLocaleString();
            }
          }
        },
        plugins: {
          legend: {
              labels: {
                usePointStyle: true,
              },
            display: true,
          },
          title: {
            display: true,
            text: TITLE,
            fontSize: 14,
          },
          colorschemes: {
            scheme: 'office.Frame6'
          }
        }
      }
    });

  });

});


  [1]: https://i.sstatic.net/oFPdX.png

Answer 1

Since you havent changed the scale type of the x axis its a category scale, the category scale is using the indexes of the ticks as the internal data format so you are not getting your labels, to get your labels you need to make your callback like so according to the docs tip:

callback: function(value, index, values) {
  return this.getLabelForValue(value).toLocaleString('en-US');
}