Chart.js带tension的折线图填充区域未完全显示问题求助

问题详情 #

• 使用版本：Chart.js v4.4.3、react-chartjs-2 v5.2.0
• 异常表现：仅在Mac最新版Chrome浏览器的特定宽度下，折线图的填充区域无法完全显示；移除配置中的tension属性后，填充显示恢复正常
• 已尝试无效操作：关闭动画（设置animation.duration: 0）、注册Filler插件（Chart.register(Filler)）

问题截图 #

相关代码 #

const chartData = {
    xAxisPlots: [
      ["JAN", "2024"],
      ["FEB", "2024"],
      ["MAR", "2024"],
    ],
    pointTootTip: ["$293652.15", "$703695.82", "$14872.33"],
    pointData: [293652.15, 703695.82, 14872.33],
  };

  const data = {
    labels: chartData.xAxisPlots,
    datasets: [
      {
        label: "",
        data: chartData.pointData,
        borderColor: "#0289AA",
        borderWidth: 1,
        backgroundColor: "rgba(2, 137, 170, 0.2)",
        fill: true,
      },
    ],
  };

  const options = {
    onClick: function (evt: ChartEvent, element: ActiveElement[]) {
      if (element[0]?.index >= 0) {
        pointCallback(element[0]?.index);
      }
    },
    animation: {
      duration: 0,
    },
    responsiveAnimationDuration: 0,
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          callback: function (value: number | string) {
            return "C100";
          },
          font: {
            size: 13,
            weight: "bold" as "bold",
          },
          color: "#656579",
          maxTicksLimit: 6,
        },
      },
      x: {
        offset: chartData.xAxisPlots.length === 1 ? true : false,
        ticks: {
          maxRotation: 0,
          maxTicksLimit: 13,
          font: {
            size: 12,
            weight: "bold" as "bold",
          },
          color: "#656579",
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      filler: {
        propagate: true,
      },
      tooltip: {
        padding: 10,
        caretPadding: 15,
        caretSize: 0,
        cornerRadius: 20,
        xAlign: "center" as "center",
        yAlign: "bottom" as "bottom",
        displayColors: false,
        backgroundColor: "#0289AA",
        bodyColor: "#FFFFFF",
        bodyFont: {
          size: 12,
          weight: "bold" as "bold",
        },
        callbacks: {
          label: function ({ dataIndex }: { dataIndex: number }) {
            return chartData.pointTootTip[dataIndex];
          },
          title: function () {
            return "";
          },
          beforeLabel: function () {
            return "";
          },
        },
      },
    },
    tension: 0.5,
    maintainAspectRatio: false,
    responsive: true,
  };

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