在Recharts.js中设置日期的最小/最大日期

npm install recharts

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: '2021-01-01', value: 400 },
  { name: '2021-01-02', value: 300 },
  // ... 更多数据
];

const CustomDateRangeLineChart = () => {
  const minDate = new Date('2021-01-01');
  const maxDate = new Date('2021-01-31');

  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis
        dataKey="name"
        type="category"
        domain={[minDate.toISOString(), maxDate.toISOString()]}
        tickFormatter={(unixTime) => new Date(unixTime).toLocaleDateString()}
      />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }} />
    </LineChart>
  );
};

export default CustomDateRangeLineChart;