如何在绝对定位的Recharts中添加图例和图表之间的间距？

Question

我第一次在我的 React 项目中使用 Recharts 我已将 BarChart 组件的图例放置在右上角。 但是，我正在努力添加图例和图表本身之间的间距。由于图例是绝对定位的，所以我无法直接在其上设置任何边距。

当尝试将图例的样式更改为相对定位时，图例将显示在图表下方，忽略对齐和垂直对齐属性

这是我的代码片段：

<BarChart data={data}
          barGap={8}>
    <CartesianGrid strokeDasharray="3 3" vertical={false}/>
    <XAxis tickFormatter={(index) => index + 1} tickMargin={16} tickLine={false}/>
    <YAxis orientation={"right"} tickMargin={16} axisLine={false} tickLine={false}/>
    <Tooltip content={<CustomTooltip/>}/>
    <Legend
        align="right" verticalAlign="top"
        iconType="circle" iconSize={12}
        formatter={(value, entry) => {
            return <LegendText>{value} ({entry.payload.unit})</LegendText>
        }}/>
    <Bar name="Poids" unit="kg" dataKey="kilogram" fill="#282D30" barSize={7}
         radius={[10, 10, 0, 0]}/>
    <Bar name="Calories brûlées" unit="kCal" dataKey="calories" fill="#E60000" barSize={7}
         radius={[10, 10, 0, 0]}/>
</BarChart>

如何在此设置中的图例和图表之间添加特定的间距（例如 65 像素）？

谢谢！

Answer 1

Recharts 是使用

svg

编写的，因此大多数内容都必须绝对定位。然而，图例包装是一个

div

Legend

有一个

wrapperStyle

属性，您可以将 CSS 传递给

 <Legend
   align="right"
   verticalAlign="top"
   iconType="circle"
   iconSize={12}
   wrapperStyle={{ paddingBottom: "20px" }}
 />

这是一个沙箱：