MUI X折线图缩小缩放时X轴标签重复问题求助

使用MUI X Line Charts实现响应式折线图时，遇到一个问题：缩小页面缩放比例后，X轴的月份标签会重复显示（每个月份出现3次），同时还存在空白间隔。

• 正常状态：无缩放时X轴每个月份仅显示一次，布局正常
• 缩放后：月份标签重复，且出现空白区域

实现代码 #

"use client";
import { LineChart } from '@mui/x-charts/LineChart';
import styles from "./HistoryGraph.module.css";
import { Skeleton } from '@mui/material';
import { useEffect, useState } from 'react';

export default function HistoryGraph() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  // Fetch data from the API endpoint
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('http://localhost:8000/api/v1/invoices/getInvoicesStats?company_id=1&year=2024');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        setData([
          10000,
          30420,
          222222,
          99999,
          742192,
          120341,
          321353,
          1000000,
          12343,
          556542,
          23424,
          223034
        ]);
        console.error("Failed to fetch data", error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  // Prepare data for the chart
  const months = [
    new Date(2024, 0, 1),
    new Date(2024, 1, 1),
    new Date(2024, 2, 1),
    new Date(2024, 3, 1),
    new Date(2024, 4, 1),
    new Date(2024, 5, 1),
    new Date(2024, 6, 1),
    new Date(2024, 7, 1),
    new Date(2024, 8, 1),
    new Date(2024, 9, 1),
    new Date(2024, 10, 1),
    new Date(2024, 11, 1),
  ];

  const seriesData = [
    {
      id: 'Monthly Total',
      //label: 'Monthly Total',
      data: data,
      showMark: false,
      color: '#0163fa' // Example color for the total
    }
  ];

  const monthDict = {
    0: "Jan",
    1: "Feb",
    2: "Mar",
    3: "Apr",
    4: "May",
    5: "Jun",
    6: "Jul",
    7: "Aug",
    8: "Sep",
    9: "Oct",
    10: "Nov",
    11: "Dec",
  };

  return (
    <div className={styles.container}>
      {loading ? (
        <>
          <Skeleton variant="text" width={100} height={30} sx={{ margin: 2 }} />
          <Skeleton variant="rectangular" height="22rem" className={styles.chartSkeleton} />
        </>
      ) : (
        <>
          <h2>Reclaims Analytics</h2>
          <LineChart
            xAxis={[
              {
                id: 'Months',
                data: months,
                scaleType: 'time',
                valueFormatter: (date) => monthDict[date.getMonth()],
              },
            ]}
            series={seriesData}
            className={styles.chart}
            grid={{ vertical: true }}
            tooltip={{ show: true }}
            margin={{ top: 70, right: 70,  left: 70 }}
          />
        </>
      )}
    </div>
  );
}

已经尝试过MUI官方文档提到的ResponsiveContainer，以及限制X轴刻度数的方案，但都没能解决问题。

项目依赖列表 #

"dependencies": {
  "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.5",
  "@mui/material": "^5.16.0",
  "@mui/x-charts": "^7.11.0",
  "@mui/x-date-pickers": "^7.9.0",
  "@phosphor-icons/react": "^2.1.6",
  "@radix-ui/react-alert-dialog": "^1.1.1",
  "@radix-ui/react-checkbox": "^1.1.1",
  "@radix-ui/react-dialog": "^1.1.1",
  "@radix-ui/react-dropdown-menu": "^2.1.1",
  "@radix-ui/react-popover": "^1.1.1",
  "@radix-ui/react-toast": "^1.2.1",
  "@table-library/react-table-library": "^4.1.7",
  "chart.js": "^4.4.3",
  "clsx": "^2.1.1",
  "dayjs": "^1.11.11",
  "next": "14.2.4",
  "next-auth": "^5.0.0-beta.20",
  "react": "^18",
  "react-chartjs-2": "^5.2.0",
  "react-dom": "^18",
  "react-drag-drop-files": "^2.3.10"
},

内容的提问来源于stack exchange，提问作者Interglot