From dbe868485abd0207a37ecc5b1b2087fb546f4941 Mon Sep 17 00:00:00 2001
From: h-des <dev.patryk.holysz@gmail.com>
Date: Fri, 5 Aug 2022 15:42:58 +0200
Subject: [PATCH] Fix vertical label rotation on web

---
 src/AbstractChart.tsx | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/AbstractChart.tsx b/src/AbstractChart.tsx
index 4f7b124f..f13f6f1c 100644
--- a/src/AbstractChart.tsx
+++ b/src/AbstractChart.tsx
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
-import { Defs, Line, LinearGradient, Stop, Text } from "react-native-svg";
+import { Platform } from "react-native";
+import { G, Defs, Line, LinearGradient, Stop, Text } from "react-native-svg";
 
 import { ChartConfig, Dataset, PartialBy } from "./HelperTypes";
 
@@ -294,19 +295,23 @@ class AbstractChart<
         fontSize * 2 +
         xLabelsOffset;
 
+      const gPositionProps = Platform.OS === 'web' ? { x, y } : {}
+      const textPositionProps = Platform.OS !== 'web' ? { x, y } : {}
+
       return (
-        <Text
-          origin={`${x}, ${y}`}
-          rotation={verticalLabelRotation}
-          key={Math.random()}
-          x={x}
-          y={y}
-          textAnchor={verticalLabelRotation === 0 ? "middle" : "start"}
-          {...this.getPropsForLabels()}
-          {...this.getPropsForVerticalLabels()}
-        >
-          {`${formatXLabel(label)}${xAxisLabel}`}
-        </Text>
+        <G {...gPositionProps}>
+          <Text
+            origin={`${x}, ${y}`}
+            rotation={verticalLabelRotation}
+            key={Math.random()}
+            textAnchor={verticalLabelRotation === 0 ? "middle" : "start"}
+            {...textPositionProps}
+            {...this.getPropsForLabels()}
+            {...this.getPropsForVerticalLabels()}
+          >
+            {`${formatXLabel(label)}${xAxisLabel}`}
+          </Text>
+        </G>
       );
     });
   };