CODEWITHSUNDEEP
reactjscharts
user1816491
user1816491

Reputation:

Recharts: Setting X-Axis Label Margin

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

enter image description here

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!

Upvotes: 9

Views: 32942

Answers (3)

Muhammad Awais
Muhammad Awais

Reputation: 1

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

Upvotes: 0

Akash Agarwal
Akash Agarwal

Reputation: 2520

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.

Upvotes: 3

Ionut Ardelean
Ionut Ardelean

Reputation: 507

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

Upvotes: 20

Related Questions