Chart.js - X-axis not displaying dates with timestamps in format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (React chartjs-2)

Question

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.

Answer 1

This code is working completely fine.

unit: Time interval

parser: Format of input

tooltipFormat: when you hover on point the output format

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

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

  const chartConfig = {
    type: 'line' as const, // Specify chart type as 'line'
    data: chartData,
    options: {
      scales: {
        x: {
          type: 'time' as const,
          time: {
            parser: 'YYYY-MM-DDTHH:mm:ss.SSSSSSZ', // Adjust parser to match ISO 8601 format
            tooltipFormat:'yyyy-MM-dd HH:mm:ss', // Adjust tooltip format
            unit: 'day' as TimeUnit,
            displayFormats:{
              day:'yyyy-MM-dd:hh:mm'
            }
          },
          title: {
            display: true,
            text: 'Timestamp',
          },
        },
        y: {
          title: {
            display: true,
            text: "power",
          },
        },
      },
    },
  };
  // ... rest of component

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

export default MeasurementChart;