Line Chart with Time-Scale Axis

Code example on setting up a line chart with a time-scale x-axis to represent time series data effectively, including formatting date labels for clarity.

import { Line } from 'react-chartjs-2';
import 'chart.js/auto';

const data = {
  datasets: [
    {
      label: 'Time Series Data',
      data: [
        { x: '2023-04-01', y: 1 },
        { x: '2023-04-02', y: 2 },
        { x: '2023-04-03', y: 3 },
        // Add more data points here
      ],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }
  ]
};

const options = {
  scales: {
    x: {
      type: 'time',
      time: {
        unit: 'day',
        displayFormats: {
           day: 'MMM D'
        }
      },
      title: {
        display: true,
        text: 'Date'
      }
    },
    y: {
      title: {
        display: true,
        text: 'Value'
      }
    }
  },
  plugins: {
    legend: {
      display: true,
      position: 'top',
    }
  }
};

This code sets up a line chart with a time-scale x-axis using react-chartjs-2. It imports necessary modules, defines the data with x values as date strings and y values as numerical data. The options configure the x-axis as a time scale with daily units and custom date display formats. It also sets titles for both axes and displays a legend on top.

return <Line data={data} options={options} />;

This line renders the line chart in a React component using the 'data' and 'options' objects defined previously. It utilizes the Line component from react-chartjs-2 library.