xAxis overlapping with chart legend

The issue is very difficult to reproduce in jsfiddle, so instead I will post some snippets and screenshot.

The chart legend is overlapping with the xAxis labels:

And on hovering over the chart, the chart height re-adjusts and corrects itself. I am using Recharts version 1.8.5

Below is the structure of my chart:

<div style={{ width: '100%', height: customHeight }}>
	{
		config.title
		&& (
			<Title title={config.title} />
		)
	}
	{
		allowZoom
		&& (
			<ZoomButtons
				props={props}
			/>
		)
	}
	<ResponsiveContainer>
		<LineChart
			data={dataToPlot()}
			margin={{
				right: 25,
				left: showYLabel ? 0 : leftMargin,
				top: CHART_MARGIN_TOP,
				bottom: 10,
			}}
			onMouseDown={(e) => {
				// some logic
			}}
			onMouseUp={() => {
				// some logic
			}}
			onMouseEnter={() => {
				// some logic
			}}
			onMouseMove={(e) => {
				// some logic
			}}
			onMouseLeave={() => {
				// some logic
			}}
		>
			<XAxis
				{...commonXAxisConfigs}
			/>
			<YAxis
				{...commonYAxisConfigs}
			/>
			{renderTooltip()}
			{
				!config.hideLegends
					? (
						<Legend
							wrapperStyle={{
								paddingTop: 20,
							}}
							content={(
								<CustomLegend
									props={props}
								/>
							)}
						/>
					)
					: null
			}

			{renderLines()}
		</LineChart>
	</ResponsiveContainer>
</div>

Any idea what could be going wrong? Again sorry for not being able to post a jsfiddle link as it’s only happening while fetching the data from server. Difficult to reproduce with hardcoded data.

[Yeshwanthi]

Also this worked for me. Setting the legend wrapper style property. I am using recharts version 2.0.6. wrapperStyle={{ position: 'relative' }}

[quandaica]

I’m facing this issue on the latest version v2.1.1.