javascript - React js分屏调整大小

Question

我想获得类似于您在图像中看到的效果。

但我怀疑它应该如何调整屏幕大小。

谁能帮我一把？

链接：codesanbox

代码：

import "./styles.css";
import SplitPane from "react-split-pane";
import { Line } from "react-chartjs-2";

export default function App() {
  const chart = () => {
    return (
      <Line
        data={{
          labels: [
            "Boston",
            "Worcester",
            "Springfield",
            "Lowell",
            "Cambridge",
            "New Bedford"
          ],
          datasets: [
            {
              data: [617594, 181045, 153060, 106519, 105162, 95072],
              backgroundColor: [
                "rgba(255, 99, 132, 0.6)",
                "rgba(54, 162, 235, 0.6)",
                "rgba(255, 206, 86, 0.6)",
                "rgba(75, 192, 192, 0.6)",
                "rgba(153, 102, 255, 0.6)",
                "rgba(255, 159, 64, 0.6)",
                "rgba(255, 99, 132, 0.6)"
              ]
            }
          ]
        }}
        options={{
          title: {
            display: true,
            text: "Largest Cities in Massachusetts",
            fontSize: 25
          },
          legend: {
            display: false,
            position: "bottom",
            labels: {
              fontColor: "#000"
            }
          }
        }}
      />
    );
  };

  return (
    <div className="App">
      <SplitPane split="horizontal" defaultSize={"50%"}>
        <SplitPane split="vertical" defaultSize={"50%"}>
          <div>TopSx{chart()}</div>
          <div>TopDx{chart()}</div>
        </SplitPane>
        <SplitPane split="vertical" defaultSize={"50%"}>
          <div>BottomSx{chart()}</div>
          <div>BottomDx{chart()}</div>
        </SplitPane>
      </SplitPane>
    </div>
  );
}