css 显示类似填充的空白的Recharts.js响应容器

3j86kqsm  于 2023-02-17  发布在  Echarts
关注(0)|答案(1)|浏览(117)

当在Recharts中使用<ResponsiveContainer>时,它会呈现类似填充的空白,这些空白出现在图表内部。
此问题可在此处重现:https://codesandbox.io/s/ykq2q0z871
[请注意<ResponsiveContainer>的红色边框和<LineChart>的蓝色边框之间的空间。]
我如何删除它,使折线图呈现从边缘到边缘的红色框?

uemypmqf

uemypmqf1#

recharts上的所有图表类型都有一个margin属性,默认为:
{ top: 5, left: 5, right: 5, bottom: 5 }
只需将修改后的prop添加到<LineChart />中即可解决此问题:

<LineChart margin={{ top: 0, left: 0, right: 0, bottom: 0 }} data={data}>

这是分叉的codesandbox

相关问题