Chartjs Timestamp to Datetime labels

Question

I'm using a timestamp format to create my scatter chart (datetime won't work for scatter). I need help changing the labels in the X axis from timestamp to datetime so that it's readable by users. Just the axis labels, not the actual timestamp values inserted to the chart.

 let ctx = (<HTMLCanvasElement>(
  document.getElementById("measurementChart")
)).getContext("2d");
 this.myChart = new Chart(ctx, {
  type: "scatter",
  data: {
    datasets: [
      {
        label: name,
        backgroundColor: "black",
        borderColor: "blue",
        showLine: true,
        data: d,
      }
    ]
  },
  options: {
    maintainAspectRatio: false,
    responsive: true,
    tooltips: {
      mode: "interpolate", //interpolate
      enabled: true,
      intersect: false,
      backgroundColor: "black",
    },
    scales: {
      yAxes: [
        {
          display: true,
          scaleLabel: {
            display: true,
          },
        }
      ],
      xAxes: [
        {
          display: true,
          scaleLabel: {
            display: false,
            labelString: "Date"
          },
        }
      ]
    },
    legend: {
        reverse: true,
      display: true,
    },
  }
});

score 0 · Accepted Answer · answered Apr 23 '21 at 09:56

You can use the tick callback as described here: https://www.chartjs.org/docs/2.9.4/axes/labelling.html#creating-custom-tick-formats

scales: {
      yAxes: [
        {
          ticks:{
            callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
           },
          display: true,
          scaleLabel: {
            display: true,
          },
        }
      ],
      xAxes: [
        {
          ticks:{
            callback: (val) => (new Date(val)) // or a different way to convert timestamp to date
           }
          display: true,
          scaleLabel: {
            display: false,
            labelString: "Date"
          },
        }
      ]
    }

Chartjs Timestamp to Datetime labels

1 Answers1