React-chartjs-2折线图红绿分段间存在间隙问题求助

我使用react-chartjs-2库绘制单折线图，通过红绿两种颜色分段区分不同状态。按照官方文档及示例代码实现后，发现红绿分段之间出现了意外的间隙，尝试调整多种配置后仍无法解决该问题。

以下是我的实现代码：

import React from "react";
import { Line } from "react-chartjs-2";
import { Chart as ChartJS, registerables } from "chart.js";
import "chartjs-adapter-moment";
ChartJS.register(...registerables);

const data = [
  {t: 1692691200000, o: 209.9, h: 210.5, c: 210.1, v: 24849.905, l: 209.7, i: 0, _id: "64e592b6ed350eac66f1279e"},
  {t: 1692694800000, o: 210.1, h: 210.9, c: 209.8, v: 17912.358, l: 209.7, i: 0, _id: "64e592b6ed350eac66f1279f"},
  {t: 1692698400000, o: 209.8, h: 210.1, c: 209.7, v: 15451.882, l: 209.3, i: 0, _id: "64e592b6ed350eac66f127a0"},
  {t: 1692702000000, o: 209.8, h: 209.8, c: 209.1, v: 14630.712, l: 208.8, i: 0, _id: "64e592b6ed350eac66f127a1"},
  {t: 1692705600000, o: 209.1, h: 209.9, c: 209.2, v: 14840.568, l: 209, i: 0, _id: "64e592b6ed350eac66f127a2"},
  {t: 1692709200000, o: 209.2, h: 209.4, c: 206.9, v: 76291.989, l: 205.9, i: 0, _id: "64e592b6ed350eac66f127a3"},
  {t: 1692712800000, o: 207, h: 207.8, c: 206.9, v: 55066.85, l: 205.9, i: 0, _id: "64e592b6ed350eac66f127a4"},
  {t: 1692716400000, o: 206.9, h: 208.1, c: 205.6, v: 70269.986, l: 204.3, i: 0, _id: "64e592b6ed350eac66f127a5"},
  {t: 1692720000000, o: 205.5, h: 207.3, c: 207.2, v: 107602.133, l: 203.4, i: 0, _id: "64e592b6ed350eac66f127a6"},
  {t: 1692723600000, o: 207.1, h: 207.2, c: 205.9, v: 59274.354, l: 204.9, i: 0, _id: "64e592b6ed350eac66f127a7"},
  {t: 1692727200000, o: 206, h: 210.4, c: 208.8, v: 81805.016, l: 204.9, i: 0, _id: "64e592b6ed350eac66f127a8"},
  {t: 1692730800000, o: 208.8, h: 209.9, c: 208.4, v: 29905.367, l: 208, i: 0, _id: "64e592b6ed350eac66f127a9"},
  {t: 1692734400000, o: 208.3, h: 209.4, c: 209.3, v: 18693.145, l: 208.3, i: 0, _id: "64e592b6ed350eac66f127aa"},
  {t: 1692738000000, o: 209.3, h: 209.5, c: 206.8, v: 60334.243, l: 204.7, i: 0, _id: "64e592b6ed350eac66f127ab"},
  {t: 1692741600000, o: 206.8, h: 209.4, c: 208.7, v: 32667.587, l: 206.4, i: 0, _id: "64e592b6ed350eac66f127ac"},
  {t: 1692745200000, o: 208.8, h: 213, c: 210.9, v: 62314.118, l: 208.7, i: 0, _id: "64e592b6ed350eac66f127ad"},
  {t: 1692748800000, o: 210.9, h: 215.6, c: 213.7, v: 98698.808, l: 210.8, i: 0, _id: "64e592b6ed350eac66f127ae"},
  {t: 1692752400000, o: 213.8, h: 214.5, c: 214.1, v: 19970.85, l: 213.5, i: 0, _id: "64e592b6ed350eac66f127af"},
  {t: 1692756000000, o: 214.1, h: 214.2, c: 213.4, v: 18173.768, l: 213.1, i: 0, _id: "64e592b6ed350eac66f127b0"},
  {t: 1692763200000, o: 212.6, h: 213.7, c: 213.6, v: 10753.479, l: 212.3, i: 0, _id: "64e592b6ed350eac66f127b1"},
  {t: 1692766800000, o: 213.5, h: 213.7, c: 213.6, v: 169.645, l: 213.5, i: 0, _id: "64e592b6ed350eac66f127b2"},
  {t: 1692770400000, o: 213.9, h: 214, c: 214, v: 1.285, l: 213.9, i: 0, _id: "64e5a0c81a0fcedd5b1b6393"},
  {t: 1692774000000, o: 214.8, h: 215.3, c: 215.2, v: 4903.512, l: 214.5, i: 0, _id: "64e5b1561a0fcedd5b312de7"},
  {t: 1692777600000, o: 216.4, h: 216.4, c: 216.4, v: 0, l: 216.4, i: 0, _id: "64e5bce91a0fcedd5b40f590"},
  {t: 1692781200000, o: 215.3, h: 215.3, c: 215.3, v: 51.575, l: 215.3, i: 0, _id: "64e5caf71a0fcedd5b5460b9"}
];

const App = () => {
  const timestamps = data.map((entry) => entry.t);
  const values = data.map((entry) => entry.c);
  console.log("🚀 ~ file: index.tsx:264 ~ ChartComponent ~ values:", values);

  const greenColor = "rgba(0, 255, 0, 0.6)";
  const redColor = "rgba(255, 0, 0, 0.6)";

  const datasets = [
    {
      label: "Close",
      data: values.map((value) => (value >= values[0] ? value : null)),
      borderColor: greenColor,
      backgroundColor: greenColor,
      fill: false,
      tension: 0.3,
      pointRadius: 0
    },
    {
      label: "Close",
      data: values.map((value) => (value < values[0] ? value : null)),
      borderColor: redColor,
      backgroundColor: redColor,
      fill: false,
      pointRadius: 0,
      tension: 0.3
    }
  ];

  const chartData = {
    labels: timestamps,
    datasets: datasets
  };

  const options = {
    scales: {
      x: {display: false},
      y: {display: false}
    },
    plugins: {legend: {display: false}}
  };
  return (
    <div>
      <Line data={chartData} options={options} />
    </div>
  );
};

export default App;

问题截图：

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