1

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.

1
  • You don't seem to have set any output format for the time tick labels; use time.unit and time.displayFormats for that. Commented Jun 9, 2024 at 23:48

1 Answer 1

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;

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.