I’m trying to create a line chart in React using chartjs-2 to visualize timestamps and their corresponding power measurements. My timestamps are in the format “YYYY-MM-DDTHH:mm:ss.SSSSSS” (including milliseconds but without timezone information).

import React, { useEffect, useState } from 'react';
// ... other imports

const MeasurementChart: React.FC<{ measurements: Measurement[] }> = ({ measurements }) => {
  // ... other component logic

  const chartConfig = {
    type: 'line' as const,
    data: chartData,
    options: {
      scales: {
        x: {
          type: 'time' as const,
          time: {
            parser: 'YYYY-MM-DDTHH:mm:ss.SSSSSS', // Adjusted for timestamps
            tooltipFormat: 'MM/DD/YY', // Optional: desired date format
          },
          title: {
            display: true,
            text: 'Timestamp',
          },
        },
        // ... y-axis configuration
      },
    },
  };

  // ... rest of component

    return (
        <div>
            {chartData && <Line 
            data={chartData} 
            options={chartConfig.options}
            />}
        </div>
    )
};

export default MeasurementChart;

Problem:

The X-axis of the chart only displays the time portion (HH:mm:ss.SSSSSS) of the timestamps. I want it to display both the date and time.

I’ve set the parser format in the x axis options to “YYYY-MM-DDTHH:mm:ss.SSSSSS” to match my timestamp format.