Me gustaría conseguir un efecto similar al que ves en la imagen.

Pero tengo dudas sobre cómo debe cambiar el tamaño de las pantallas.

¿Alguien puede darme una mano?

Enlace: codesanbox

Código:

 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> ); }