Chart.js 4.3.0移除图表边框求助：已尝试方法无效

你遇到的问题核心是两个配置误区：

• scaleLineColor是Chart.js v2及更早版本的配置项，v4已完全废弃，放在根配置里不会产生任何效果。
• 你设置的grid.drawBorder仅控制网格线的外围边框，而你看到的黑色边框是坐标轴自身的轴线，需要单独配置隐藏。

针对你的需求，提供两种解决方案：

方案1：完全隐藏坐标轴（含轴线、刻度） #

直接给X、Y轴设置display: false，整个坐标轴会被彻底隐藏：

const AreaChart = () => {
  const chartContainer = useRef(null);
  const data = [1,2]; // 调整与labels长度一致，避免数据不匹配

  useEffect(() => {
    if (chartContainer.current) {
      const ctx = chartContainer.current.getContext("2d");

      const labels = ["Today","Day 2"];

      const myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: labels,
          datasets: [
            {
              label: "Data",
              data: data,
              fill: true,
            },
          ],
        },
        options: {
          scales: {
            x: {
              display: false, // 完全隐藏X轴
              grid: {
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            y: {
              display: false, // 完全隐藏Y轴
              grid: {
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
          },
        },
      });

    }
  }, []);

  return (
    <div style={{ width: "100%", margin: "0 auto" }}>
      <canvas ref={chartContainer} />
    </div>
  );
};

export default AreaChart;

方案2：仅隐藏坐标轴轴线（保留刻度） #

如果需要保留刻度文字，只隐藏黑色轴线，给X、Y轴的border配置设置display: false：

const AreaChart = () => {
  const chartContainer = useRef(null);
  const data = [1,2]; // 调整与labels长度一致，避免数据不匹配

  useEffect(() => {
    if (chartContainer.current) {
      const ctx = chartContainer.current.getContext("2d");

      const labels = ["Today","Day 2"];

      const myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: labels,
          datasets: [
            {
              label: "Data",
              data: data,
              fill: true,
            },
          ],
        },
        options: {
          scales: {
            x: {
              border: {
                display: false, // 隐藏X轴轴线
              },
              grid: {
                drawBorder: false,
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            y: {
              border: {
                display: false, // 隐藏Y轴轴线
              },
              grid: {
                drawBorder: false,
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
          },
        },
      });

    }
  }, []);

  return (
    <div style={{ width: "100%", margin: "0 auto" }}>
      <canvas ref={chartContainer} />
    </div>
  );
};

export default AreaChart;

额外提醒：你原代码中data数组长度为3，但labels只有2个，会导致图表数据匹配异常，建议调整两者长度一致。

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