reactjs - 重新图表 : Setting X-Axis Label Margin

Question

如何设置 X 轴和标签之间的边距(在我的例子中为“dd.mm.yy”？

这是我的面积图:

 <AreaChart
        width={600}
        height={400}
        data={data}
        connectNulls={true}
        margin={{top: 20, left: 120, bottom: 20}}>
        <defs>
            <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor="#2198F3" stopOpacity={1}/>
                <stop offset="95%" stopColor="#4BABF4" stopOpacity={0.6}/>
            </linearGradient>
        </defs>
        <Area
            dot={{ stroke: '#2196f3', strokeWidth: 4, r: 7, fill: 'white'}}
            type='monotone'
            dataKey='value'
            stroke='#2196f3'
            strokeWidth='4'
            fill='url(#colorUv)'
        />
        <XAxis dataKey="name" />
        <YAxis orientation="right" />
        <CartesianGrid strokeDasharray="3 3"/>
        <Tooltip/>
    </AreaChart>

附: recharts-标签不可用!

Answer 1

尝试在 XAxid 和 YAxis 上使用 dx 和 dy 属性，如下所示:

<XAxis dataKey="name" dy={10}/>

或

<YAxis orientation="right" dx={5}/>

基于这些值，当渲染 SVG 并计算刻度的位置时，您为 dx 设置的量将添加到刻度项 X 位置的正常量中。因此，对于 YAxis，这将在表示刻度的文本元素的 x 值上添加值 10。 dy 也是如此