在图表周围做一个边框

Question

我是新手，现在就创建一些。 我已经创建了这个：

我对此很满意^^，但我不了解和理解的是如何设计风格，就像我想要的那样，在侧面上需要更多空间：

您可以在图像中看到边框很大，可以容纳所有内容，并且只有水平线而不是垂直线，我需要帮助。

我的代码：

<div className={styles.lineChart}>
                <h3 className={styles.title}>Body Weight</h3>
            <ResponsiveContainer>
    <LineChart 
        data={props.data}
        margin={{top: 5, right: 30, left: 20, bottom: 5}}>
        <XAxis dataKey="day"/>
        <YAxis type="number" domain={[80, 300]}/>
        <CartesianGrid strokeDasharray="3 3"/>
        <Tooltip/>
        <Legend />
                <Line type="monotone" dataKey="body weight" stroke="#57c0e8" activeDot={{r: 8}}/>
    </LineChart>
    </ResponsiveContainer>
    </div>

和CSS：

.lineChart {
    display: flex;
    flex-direction: column;
    border: 1px solid #57c0e8;
    width:600px;
    height:300px;
    float:right;
    border-radius: 20px;

}

.title {
    margin-left: auto;
    margin-right: auto; 
    font-size: 20px;
}