@octanejs/recharts 0.1.61 → 0.1.63

package/src/cartesian/CartesianGrid.tsrx

@@ -14,9 +14,7 @@ import { getTicks, type GetTicksInput } from './getTicks';
 import { defaultCartesianAxisProps } from './CartesianAxis.tsrx';
 import { useChartHeight, useChartWidth, useOffsetInternal } from '../context/chartLayoutContext';
 import type { AxisId } from '../state/cartesianAxisSlice';
-import {
-	selectAxisPropsNeededForCartesianGridTicksGenerator,
-} from '../state/selectors/axisSelectors';
+import { selectAxisPropsNeededForCartesianGridTicksGenerator } from '../state/selectors/axisSelectors';
 import { useAppSelector } from '../state/hooks';
 import { useIsPanorama } from '../context/PanoramaContext';
 import { type RequiresDefaultProps, resolveDefaultProps } from '../util/resolveDefaultProps';
@@ -28,16 +26,15 @@ import { DefaultZIndexes } from '../zIndex/DefaultZIndexes';
 /**
  * The <CartesianGrid horizontal
  */
-export type GridLineTypeFunctionProps =
-	Omit<LineItemProps, 'key'> & {
-		// React does not pass the key through when calling cloneElement - so it might be undefined when cloning
-		key: LineItemProps['key'] | undefined;
-		// offset is not present in LineItemProps, but it is read from context and then passed to the GridLineType function and element
-		offset: ChartOffsetInternal;
-	};
+export type GridLineTypeFunctionProps = Omit<LineItemProps, 'key'> & {
+	// React does not pass the key through when calling cloneElement - so it might be undefined when cloning
+	key: LineItemProps['key'] | undefined;
+	// offset is not present in LineItemProps, but it is read from context and then passed to the GridLineType function and element
+	offset: ChartOffsetInternal;
+};
 
-export type AxisPropsForCartesianGridTicksGeneration =
-	AxisPropsNeededForTicksGenerator & Omit<GetTicksInput, 'ticks' | 'viewBox'>;
+export type AxisPropsForCartesianGridTicksGeneration = AxisPropsNeededForTicksGenerator &
+	Omit<GetTicksInput, 'ticks' | 'viewBox'>;
 
 type GridLineType =
 	| SVGProps<SVGLineElement>
@@ -45,163 +42,167 @@ type GridLineType =
 	| ((props: GridLineTypeFunctionProps) => OctaneElement<SVGElement>)
 	| boolean;
 
-export type HorizontalCoordinatesGenerator =
-	(props: {
+export type HorizontalCoordinatesGenerator = (
+	props: {
 		yAxis: AxisPropsForCartesianGridTicksGeneration | undefined;
 		width: number;
 		height: number;
 		offset: ChartOffsetInternal;
-	}, syncWithTicks: boolean) => number[];
+	},
+	syncWithTicks: boolean,
+) => number[];
 
-export type VerticalCoordinatesGenerator =
-	(props: {
+export type VerticalCoordinatesGenerator = (
+	props: {
 		xAxis: AxisPropsForCartesianGridTicksGeneration | undefined;
 		width: number;
 		height: number;
 		offset: ChartOffsetInternal;
-	}, syncWithTicks: boolean) => number[];
+	},
+	syncWithTicks: boolean,
+) => number[];
 
 interface CartesianGridProps extends ZIndexable {
 	/**
- * The width of grid. If undefined, covers the full width of the chart plot area.
- */
+	 * The width of grid. If undefined, covers the full width of the chart plot area.
+	 */
 	width?: number;
 	/**
- * The height of grid. If undefined, covers the full height of the chart plot area.
- */
+	 * The height of grid. If undefined, covers the full height of the chart plot area.
+	 */
 	height?: number;
 	/**
- * A function that generates the y-coordinates of all horizontal lines.
- *
- * @see {@link https://codesandbox.io/p/sandbox/cartesian-grid-with-coordinate-generators-my38cg?file=%2Fsrc%2FApp.tsx Cartesian grid with coordinate generators}
- */
+	 * A function that generates the y-coordinates of all horizontal lines.
+	 *
+	 * @see {@link https://codesandbox.io/p/sandbox/cartesian-grid-with-coordinate-generators-my38cg?file=%2Fsrc%2FApp.tsx Cartesian grid with coordinate generators}
+	 */
 	horizontalCoordinatesGenerator?: HorizontalCoordinatesGenerator;
 	/**
- * A function that generates the x-coordinates of all vertical lines.
- *
- * @see {@link https://codesandbox.io/p/sandbox/cartesian-grid-with-coordinate-generators-my38cg?file=%2Fsrc%2FApp.tsx Cartesian grid with coordinate generators}
- */
+	 * A function that generates the x-coordinates of all vertical lines.
+	 *
+	 * @see {@link https://codesandbox.io/p/sandbox/cartesian-grid-with-coordinate-generators-my38cg?file=%2Fsrc%2FApp.tsx Cartesian grid with coordinate generators}
+	 */
 	verticalCoordinatesGenerator?: VerticalCoordinatesGenerator;
 	/**
- * The x-coordinate of grid.
- * If left undefined, it will be computed from the chart's offset and margins.
- */
+	 * The x-coordinate of grid.
+	 * If left undefined, it will be computed from the chart's offset and margins.
+	 */
 	x?: number;
 	/**
- * The y-coordinate of grid.
- * If left undefined, it will be computed from the chart's offset and margins.
- */
+	 * The y-coordinate of grid.
+	 * If left undefined, it will be computed from the chart's offset and margins.
+	 */
 	y?: number;
 	/**
- * If set false, no horizontal grid lines will be drawn.
- *
- * @defaultValue true
- */
+	 * If set false, no horizontal grid lines will be drawn.
+	 *
+	 * @defaultValue true
+	 */
 	horizontal?: GridLineType;
 	/**
- * If set false, no vertical grid lines will be drawn.
- *
- * @defaultValue true
- */
+	 * If set false, no vertical grid lines will be drawn.
+	 *
+	 * @defaultValue true
+	 */
 	vertical?: GridLineType;
 	/**
- * Array of coordinates in pixels where to draw horizontal grid lines.
- * Has priority over syncWithTicks and horizontalValues.
- *
- * @defaultValue []
- */
+	 * Array of coordinates in pixels where to draw horizontal grid lines.
+	 * Has priority over syncWithTicks and horizontalValues.
+	 *
+	 * @defaultValue []
+	 */
 	horizontalPoints?: number[];
 	/**
- * Array of coordinates in pixels where to draw vertical grid lines.
- * Has priority over syncWithTicks and verticalValues.
- *
- * @defaultValue []
- */
+	 * Array of coordinates in pixels where to draw vertical grid lines.
+	 * Has priority over syncWithTicks and verticalValues.
+	 *
+	 * @defaultValue []
+	 */
 	verticalPoints?: number[];
 	/**
- * The background color used to fill the space between grid lines
- *
- * @defaultValue none
- * @example <CartesianGrid fill="red" />
- * @example <CartesianGrid fill="#ccc" />
- */
+	 * The background color used to fill the space between grid lines
+	 *
+	 * @defaultValue none
+	 * @example <CartesianGrid fill="red" />
+	 * @example <CartesianGrid fill="#ccc" />
+	 */
 	fill?: string;
 	/**
- * The opacity of the background used to fill the space between grid lines
- *
- * @example <CartesianGrid fill="red" fillOpacity={0.6} />
- */
+	 * The opacity of the background used to fill the space between grid lines
+	 *
+	 * @example <CartesianGrid fill="red" fillOpacity={0.6} />
+	 */
 	fillOpacity?: number | string;
 	/**
- * Defines background color of stripes.
- *
- * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
- * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
- *
- * In case there are more stripes than colors, the colors will start from beginning.
- * So for example: verticalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
- *
- * If this is undefined, or an empty array, then there is no background fill.
- * Note: Grid lines will be rendered above these background stripes.
- *
- * @defaultValue []
- */
+	 * Defines background color of stripes.
+	 *
+	 * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
+	 * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
+	 *
+	 * In case there are more stripes than colors, the colors will start from beginning.
+	 * So for example: verticalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
+	 *
+	 * If this is undefined, or an empty array, then there is no background fill.
+	 * Note: Grid lines will be rendered above these background stripes.
+	 *
+	 * @defaultValue []
+	 */
 	verticalFill?: string[];
 	/**
- * Defines background color of stripes.
- *
- * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
- * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
- *
- * In case there are more stripes than colors, the colors will start from beginning.
- * So for example: horizontalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
- *
- * If this is undefined, or an empty array, then there is no background fill.
- * Note: Grid lines will be rendered above these background stripes.
- *
- * @defaultValue []
- */
+	 * Defines background color of stripes.
+	 *
+	 * The values from this array will be passed in as the `fill` property in a `rect` SVG element.
+	 * For possible values see: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#rect
+	 *
+	 * In case there are more stripes than colors, the colors will start from beginning.
+	 * So for example: horizontalFill['yellow', 'black'] produces a pattern of yellow|black|yellow|black
+	 *
+	 * If this is undefined, or an empty array, then there is no background fill.
+	 * Note: Grid lines will be rendered above these background stripes.
+	 *
+	 * @defaultValue []
+	 */
 	horizontalFill?: string[];
 	/**
- * If true, only the lines that correspond to the axes ticks values will be drawn.
- * If false, extra lines could be added for each axis (at min and max coordinates), if there will not such ticks.
- * horizontalPoints, verticalPoints, horizontalValues, verticalValues have priority over syncWithTicks.
- *
- * @defaultValue false
- */
+	 * If true, only the lines that correspond to the axes ticks values will be drawn.
+	 * If false, extra lines could be added for each axis (at min and max coordinates), if there will not such ticks.
+	 * horizontalPoints, verticalPoints, horizontalValues, verticalValues have priority over syncWithTicks.
+	 *
+	 * @defaultValue false
+	 */
 	syncWithTicks?: boolean;
 	/**
- * Array of values, where horizontal lines will be drawn. Numbers or strings, in dependence on axis type.
- * Has priority over syncWithTicks but not over horizontalPoints.
- */
+	 * Array of values, where horizontal lines will be drawn. Numbers or strings, in dependence on axis type.
+	 * Has priority over syncWithTicks but not over horizontalPoints.
+	 */
 	horizontalValues?: number[] | string[];
 	/**
- * Array of values, where vertical lines will be drawn. Numbers or strings, in dependence on axis type.
- * Has priority over syncWithTicks but not over verticalPoints.
- */
+	 * Array of values, where vertical lines will be drawn. Numbers or strings, in dependence on axis type.
+	 * Has priority over syncWithTicks but not over verticalPoints.
+	 */
 	verticalValues?: number[] | string[];
 	/**
- * The pattern of dashes and gaps used to paint the lines of the grid
- *
- * @example <CartesianGrid strokeDasharray="3 3" />
- * @example <CartesianGrid strokeDasharray={[5, 5, 1, 5]} />
- * @example <CartesianGrid strokeDasharray="5 5 1 5" />
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray on MDN}
- */
+	 * The pattern of dashes and gaps used to paint the lines of the grid
+	 *
+	 * @example <CartesianGrid strokeDasharray="3 3" />
+	 * @example <CartesianGrid strokeDasharray={[5, 5, 1, 5]} />
+	 * @example <CartesianGrid strokeDasharray="5 5 1 5" />
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray stroke-dasharray on MDN}
+	 */
 	strokeDasharray?: string | number[];
 	/**
- * The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
- * @defaultValue 0
- */
+	 * The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.
+	 * @defaultValue 0
+	 */
 	xAxisId?: AxisId;
 	/**
- * The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
- * @defaultValue 0
- */
+	 * The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.
+	 * @defaultValue 0
+	 */
 	yAxisId?: AxisId;
 	/**
- * @defaultValue -100
- */
+	 * @defaultValue -100
+	 */
 	zIndex?: number;
 }
 
@@ -209,8 +210,8 @@ type AcceptedSvgProps = Omit<SVGProps<SVGLineElement>, 'offset'>;
 
 export type Props = AcceptedSvgProps & CartesianGridProps;
 
-type CartesianGridInternalProps =
-	AcceptedSvgProps & RequiresDefaultProps<CartesianGridProps, typeof defaultCartesianGridProps> & {
+type CartesianGridInternalProps = AcceptedSvgProps &
+	RequiresDefaultProps<CartesianGridProps, typeof defaultCartesianGridProps> & {
 		// x,y,width,height are not declared directly in default props but are resolved using offset, if undefined
 		x: number;
 		y: number;
@@ -229,31 +230,32 @@ const Background = (
 
 	const { fillOpacity, x, y, width, height, ry } = props;
 
-	return <rect
-		x={x}
-		y={y}
-		ry={ry}
-		width={width}
-		height={height}
-		stroke="none"
-		fill={fill}
-		fillOpacity={fillOpacity}
-		className="recharts-cartesian-grid-bg"
-	/>;
+	return (
+		<rect
+			x={x}
+			y={y}
+			ry={ry}
+			width={width}
+			height={height}
+			stroke="none"
+			fill={fill}
+			fillOpacity={fillOpacity}
+			className="recharts-cartesian-grid-bg"
+		/>
+	);
 };
 
-type LineItemProps =
-	Props & {
-		offset: ChartOffsetInternal;
-		xAxis: undefined | AxisPropsForCartesianGridTicksGeneration;
-		yAxis: undefined | AxisPropsForCartesianGridTicksGeneration;
-		x1: number;
-		y1: number;
-		x2: number;
-		y2: number;
-		key: string;
-		index: number;
-	};
+type LineItemProps = Props & {
+	offset: ChartOffsetInternal;
+	xAxis: undefined | AxisPropsForCartesianGridTicksGeneration;
+	yAxis: undefined | AxisPropsForCartesianGridTicksGeneration;
+	x1: number;
+	y1: number;
+	x2: number;
+	y2: number;
+	key: string;
+	index: number;
+};
 
 function LineItem({
 	option,
@@ -271,26 +273,19 @@ function LineItem({
 	} else {
 		const { x1, y1, x2, y2, key, ...others } = lineItemProps;
 		const { offset: __, ...restOfFilteredProps } = svgPropertiesNoEvents(others) ?? {};
-		lineItem = <line
-			{...restOfFilteredProps}
-			x1={x1}
-			y1={y1}
-			x2={x2}
-			y2={y2}
-			fill="none"
-			key={key}
-		/>;
+		lineItem = (
+			<line {...restOfFilteredProps} x1={x1} y1={y1} x2={x2} y2={y2} fill="none" key={key} />
+		);
 	}
 
 	return lineItem;
 }
 
-type GridLinesProps =
-	CartesianGridInternalProps & {
-		offset: GridLineTypeFunctionProps['offset'];
-		xAxis: GridLineTypeFunctionProps['xAxis'];
-		yAxis: GridLineTypeFunctionProps['yAxis'];
-	};
+type GridLinesProps = CartesianGridInternalProps & {
+	offset: GridLineTypeFunctionProps['offset'];
+	xAxis: GridLineTypeFunctionProps['xAxis'];
+	yAxis: GridLineTypeFunctionProps['yAxis'];
+};
 
 function HorizontalGridLines(props: GridLinesProps) {
 	const { x, width, horizontal = true, horizontalPoints } = props;
@@ -359,9 +354,9 @@ function HorizontalStripes(props: CartesianGridInternalProps) {
 		return null;
 	}
 
-	const roundedSortedHorizontalPoints = horizontalPoints.map((e) => Math.round(e + y - y)).sort(
-		(a, b) => a - b,
-	);
+	const roundedSortedHorizontalPoints = horizontalPoints
+		.map((e) => Math.round(e + y - y))
+		.sort((a, b) => a - b);
 	// Why is this condition `!==` instead of `<=` ?
 	if (y !== roundedSortedHorizontalPoints[0]) {
 		roundedSortedHorizontalPoints.unshift(y);
@@ -376,17 +371,19 @@ function HorizontalStripes(props: CartesianGridInternalProps) {
 			return null;
 		}
 		const colorIndex = i % horizontalFill.length;
-		return <rect
-			key={`react-${i}`}
-			y={entry}
-			x={x}
-			height={lineHeight}
-			width={width}
-			stroke="none"
-			fill={horizontalFill[colorIndex]}
-			fillOpacity={fillOpacity}
-			className="recharts-cartesian-grid-bg"
-		/>;
+		return (
+			<rect
+				key={`react-${i}`}
+				y={entry}
+				x={x}
+				height={lineHeight}
+				width={width}
+				stroke="none"
+				fill={horizontalFill[colorIndex]}
+				fillOpacity={fillOpacity}
+				className="recharts-cartesian-grid-bg"
+			/>
+		);
 	});
 
 	return <g className="recharts-cartesian-gridstripes-horizontal">{items}</g>;
@@ -398,9 +395,9 @@ function VerticalStripes(props: CartesianGridInternalProps) {
 		return null;
 	}
 
-	const roundedSortedVerticalPoints = verticalPoints.map((e) => Math.round(e + x - x)).sort(
-		(a, b) => a - b,
-	);
+	const roundedSortedVerticalPoints = verticalPoints
+		.map((e) => Math.round(e + x - x))
+		.sort((a, b) => a - b);
 
 	if (x !== roundedSortedVerticalPoints[0]) {
 		roundedSortedVerticalPoints.unshift(x);
@@ -415,17 +412,19 @@ function VerticalStripes(props: CartesianGridInternalProps) {
 			return null;
 		}
 		const colorIndex = i % verticalFill.length;
-		return <rect
-			key={`react-${i}`}
-			x={entry}
-			y={y}
-			width={lineWidth}
-			height={height}
-			stroke="none"
-			fill={verticalFill[colorIndex]}
-			fillOpacity={fillOpacity}
-			className="recharts-cartesian-grid-bg"
-		/>;
+		return (
+			<rect
+				key={`react-${i}`}
+				x={entry}
+				y={y}
+				width={lineWidth}
+				height={height}
+				stroke="none"
+				fill={verticalFill[colorIndex]}
+				fillOpacity={fillOpacity}
+				className="recharts-cartesian-grid-bg"
+			/>
+		);
 	});
 
 	return <g className="recharts-cartesian-gridstripes-vertical">{items}</g>;
@@ -434,32 +433,34 @@ function VerticalStripes(props: CartesianGridInternalProps) {
 const defaultVerticalCoordinatesGenerator: VerticalCoordinatesGenerator = (
 	{ xAxis, width, height, offset },
 	syncWithTicks,
-) => getCoordinatesOfGrid(
-	getTicks({
-		...defaultCartesianAxisProps,
-		...xAxis,
-		ticks: getTicksOfAxis(xAxis, true),
-		viewBox: { x: 0, y: 0, width, height },
-	}),
-	offset.left,
-	offset.left + offset.width,
-	syncWithTicks,
-);
+) =>
+	getCoordinatesOfGrid(
+		getTicks({
+			...defaultCartesianAxisProps,
+			...xAxis,
+			ticks: getTicksOfAxis(xAxis, true),
+			viewBox: { x: 0, y: 0, width, height },
+		}),
+		offset.left,
+		offset.left + offset.width,
+		syncWithTicks,
+	);
 
 const defaultHorizontalCoordinatesGenerator: HorizontalCoordinatesGenerator = (
 	{ yAxis, width, height, offset },
 	syncWithTicks,
-) => getCoordinatesOfGrid(
-	getTicks({
-		...defaultCartesianAxisProps,
-		...yAxis,
-		ticks: getTicksOfAxis(yAxis, true),
-		viewBox: { x: 0, y: 0, width, height },
-	}),
-	offset.top,
-	offset.top + offset.height,
-	syncWithTicks,
-);
+) =>
+	getCoordinatesOfGrid(
+		getTicks({
+			...defaultCartesianAxisProps,
+			...yAxis,
+			ticks: getTicksOfAxis(yAxis, true),
+			viewBox: { x: 0, y: 0, width, height },
+		}),
+		offset.top,
+		offset.top + offset.height,
+		syncWithTicks,
+	);
 
 export const defaultCartesianGridProps = {
 	horizontal: true,
@@ -497,34 +498,15 @@ export function CartesianGrid(props: Props) {
 		height: isNumber(props.height) ? props.height : offset.height,
 	};
 
-	const {
-		xAxisId,
-		yAxisId,
-		x,
-		y,
-		width,
-		height,
-		syncWithTicks,
-		horizontalValues,
-		verticalValues,
-	} = propsIncludingDefaults;
+	const { xAxisId, yAxisId, x, y, width, height, syncWithTicks, horizontalValues, verticalValues } =
+		propsIncludingDefaults;
 
 	const isPanorama = useIsPanorama();
-	const xAxis: AxisPropsForCartesianGridTicksGeneration | undefined = useAppSelector(
-		(state) => selectAxisPropsNeededForCartesianGridTicksGenerator(
-			state,
-			'xAxis',
-			xAxisId,
-			isPanorama,
-		),
+	const xAxis: AxisPropsForCartesianGridTicksGeneration | undefined = useAppSelector((state) =>
+		selectAxisPropsNeededForCartesianGridTicksGenerator(state, 'xAxis', xAxisId, isPanorama),
 	);
-	const yAxis: AxisPropsForCartesianGridTicksGeneration | undefined = useAppSelector(
-		(state) => selectAxisPropsNeededForCartesianGridTicksGenerator(
-			state,
-			'yAxis',
-			yAxisId,
-			isPanorama,
-		),
+	const yAxis: AxisPropsForCartesianGridTicksGeneration | undefined = useAppSelector((state) =>
+		selectAxisPropsNeededForCartesianGridTicksGenerator(state, 'yAxis', yAxisId, isPanorama),
 	);
 
 	if (!isPositiveNumber(width) || !isPositiveNumber(height) || !isNumber(x) || !isNumber(y)) {
@@ -532,12 +514,12 @@ export function CartesianGrid(props: Props) {
 	}
 
 	/*
- * verticalCoordinatesGenerator and horizontalCoordinatesGenerator are defined
- * outside the propsIncludingDefaults because they were never part of the original props
- * and they were never passed as a prop down to horizontal/vertical custom elements.
- * If we add these two to propsIncludingDefaults then we are changing public API.
- * Not a bad thing per se but also not necessary.
- */
+	 * verticalCoordinatesGenerator and horizontalCoordinatesGenerator are defined
+	 * outside the propsIncludingDefaults because they were never part of the original props
+	 * and they were never passed as a prop down to horizontal/vertical custom elements.
+	 * If we add these two to propsIncludingDefaults then we are changing public API.
+	 * Not a bad thing per se but also not necessary.
+	 */
 	const verticalCoordinatesGenerator =
 		propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator;
 	const horizontalCoordinatesGenerator =
@@ -548,7 +530,7 @@ export function CartesianGrid(props: Props) {
 	// No horizontal points are specified
 	if (
 		(!horizontalPoints || !horizontalPoints.length) &&
-			typeof horizontalCoordinatesGenerator === 'function'
+		typeof horizontalCoordinatesGenerator === 'function'
 	) {
 		const isHorizontalValues = horizontalValues && horizontalValues.length;
 
@@ -579,7 +561,7 @@ export function CartesianGrid(props: Props) {
 	// No vertical points are specified
 	if (
 		(!verticalPoints || !verticalPoints.length) &&
-			typeof verticalCoordinatesGenerator === 'function'
+		typeof verticalCoordinatesGenerator === 'function'
 	) {
 		const isVerticalValues = verticalValues && verticalValues.length;
 		const generatorResult = verticalCoordinatesGenerator(
@@ -605,38 +587,40 @@ export function CartesianGrid(props: Props) {
 		}
 	}
 
-	return <ZIndexLayer zIndex={propsIncludingDefaults.zIndex}>
-		<g className="recharts-cartesian-grid">
-			<Background
-				fill={propsIncludingDefaults.fill}
-				fillOpacity={propsIncludingDefaults.fillOpacity}
-				x={propsIncludingDefaults.x}
-				y={propsIncludingDefaults.y}
-				width={propsIncludingDefaults.width}
-				height={propsIncludingDefaults.height}
-				ry={propsIncludingDefaults.ry}
-			/>
-
-			<HorizontalStripes {...propsIncludingDefaults} horizontalPoints={horizontalPoints} />
-			<VerticalStripes {...propsIncludingDefaults} verticalPoints={verticalPoints} />
-
-			<HorizontalGridLines
-				{...propsIncludingDefaults}
-				offset={offset}
-				horizontalPoints={horizontalPoints}
-				xAxis={xAxis}
-				yAxis={yAxis}
-			/>
-
-			<VerticalGridLines
-				{...propsIncludingDefaults}
-				offset={offset}
-				verticalPoints={verticalPoints}
-				xAxis={xAxis}
-				yAxis={yAxis}
-			/>
-		</g>
-	</ZIndexLayer>;
+	return (
+		<ZIndexLayer zIndex={propsIncludingDefaults.zIndex}>
+			<g className="recharts-cartesian-grid">
+				<Background
+					fill={propsIncludingDefaults.fill}
+					fillOpacity={propsIncludingDefaults.fillOpacity}
+					x={propsIncludingDefaults.x}
+					y={propsIncludingDefaults.y}
+					width={propsIncludingDefaults.width}
+					height={propsIncludingDefaults.height}
+					ry={propsIncludingDefaults.ry}
+				/>
+
+				<HorizontalStripes {...propsIncludingDefaults} horizontalPoints={horizontalPoints} />
+				<VerticalStripes {...propsIncludingDefaults} verticalPoints={verticalPoints} />
+
+				<HorizontalGridLines
+					{...propsIncludingDefaults}
+					offset={offset}
+					horizontalPoints={horizontalPoints}
+					xAxis={xAxis}
+					yAxis={yAxis}
+				/>
+
+				<VerticalGridLines
+					{...propsIncludingDefaults}
+					offset={offset}
+					verticalPoints={verticalPoints}
+					xAxis={xAxis}
+					yAxis={yAxis}
+				/>
+			</g>
+		</ZIndexLayer>
+	);
 }
 
 CartesianGrid.displayName = 'CartesianGrid';