Recharts: Setting X-Axis Label Margin

Question

How can I set the margin between X-Axis and the label (in my case 'dd.mm.yy' ?

That is my AreaChart:

 <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>

p.s. recharts-tag is not available!

score 17 · Answer 1 · answered Mar 16 '18 at 14:59

Try using dx and dy properties on XAxid and YAxis like this:

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

or

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

Based on these values, when the SVG is rendered and the positions of the ticks are calculated, the amount that you set for dx will be added to the normal amount of the X position of the tick item. So in the case of YAxis this will add a value of 10 the the x value of the text element that represents the tick. Same goes for dy

I was wondering why their docs didn't have this, but it's SVG related, per se. — Brent, Sep 14 '22 at 18:06

score 3 · Answer 2 · answered Feb 27 '19 at 21:45

3

From the docs, the default offset for a label is 5. You need to set it to 0 or less for it to not overlap ticks.

answered Feb 27 '19 at 21:45

Akash Agarwal

2,326
1
27
57

1

Thanks - reducing the value to move it further away was unintuitive. – benjamin.keen Oct 15 '20 at 01:10

Recharts: Setting X-Axis Label Margin

2 Answers2

Linked