fixup

Author: ChengYanJin

src/lib/components/charts/common/SharedComponents.tsx

@@ -2,11 +2,11 @@ import { ResponsiveContainer } from 'recharts';
 import styled, { useTheme } from 'styled-components';
 import { spacing, Stack, Wrap } from '../../../spacing';
 import { Box } from '../../box/Box';
-import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
-import { FormattedDateTime } from '../../date/FormattedDateTime';
 import { IconHelp } from '../../iconhelper/IconHelper';
 import { Loader } from '../../loader/Loader.component';
 import { Text } from '../../text/Text.component';
+import { ConstrainedText } from '../../constrainedtext/Constrainedtext.component';
+import { FormattedDateTime } from '../../date/FormattedDateTime';
 import { formatXAxisDate, maxWidthTooltip } from './chartUtils';
 import { TimeType } from '../types';
 
@@ -149,32 +149,45 @@ export const CustomTick = ({
       x={centerX}
       y={y - 10}
       width={tickWidth}
-      color={theme.textSecondary}
-      overflow="visible"
+      height={30}
+      style={{
+        overflow: 'visible',
+        pointerEvents: 'none',
+      }}
     >
-      <ConstrainedText
-        color="textSecondary"
-        text={
-          <Text variant="Smaller">
-            {type.type === 'time' ? (
-              <FormattedDateTime
-                format={formatXAxisDate(duration)}
-                value={new Date(payload.value)}
-              />
-            ) : (
-              String(payload.value)
-            )}
-          </Text>
-        }
-        centered
-        tooltipStyle={{
-          backgroundColor: theme.backgroundLevel1,
-          padding: spacing.r10,
-          borderRadius: spacing.r8,
-          border: `1px solid ${theme.border}`,
-          position: 'absolute',
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
         }}
-      />
+      >
+        <ConstrainedText
+          color="textSecondary"
+          text={
+            <Text variant="Smaller">
+              {type.type === 'time' ? (
+                <FormattedDateTime
+                  format={formatXAxisDate(duration)}
+                  value={new Date(payload.value)}
+                />
+              ) : (
+                String(payload.value)
+              )}
+            </Text>
+          }
+          centered
+          tooltipStyle={{
+            backgroundColor: theme.backgroundLevel1,
+            padding: spacing.r10,
+            borderRadius: spacing.r8,
+            border: `1px solid ${theme.border}`,
+            position: 'absolute',
+          }}
+        />
+      </div>
     </foreignObject>
   );
 };