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!

Gilburt

Answer 1

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

Horseweed

I was wondering why their docs didn't have this, but it's SVG related, per se. – Puklich

Answer 2

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.

Oistrakh

Thanks - reducing the value to move it further away was unintuitive. – Perugia

Answer 3

                 <XAxis              
                    dataKey="name"
                    tick={(props) => (
                        <text {...props} x={props.x} y={props.y} dy={16}   textAnchor="middle" fill="#666">
                            {`${props.payload.value}`}
                        </text>
                    )}
                  dx={5}
                />

Sheilasheilah

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gutierrez