diff --git a/lib/typescript/src/charts/line/useDatetime.d.ts b/lib/typescript/src/charts/line/useDatetime.d.ts
index c6f73dd8b31294d0e4c0597519dd998ccd84ad30..9f9eb03e25d1e020de37c706e8f8803d0b9dcefa 100644
--- a/lib/typescript/src/charts/line/useDatetime.d.ts
+++ b/lib/typescript/src/charts/line/useDatetime.d.ts
@@ -1,13 +1,10 @@
 import type { TFormatterFn } from '../candle/types';
+import { SharedValue } from 'react-native-reanimated';
 export declare function useLineChartDatetime({ format, locale, options, }?: {
     format?: TFormatterFn<number>;
     locale?: string;
     options?: Intl.DateTimeFormatOptions;
 }): {
-    value: Readonly<{
-        value: string;
-    }>;
-    formatted: Readonly<{
-        value: string;
-    }>;
+    value: SharedValue<string>;
+    formatted: SharedValue<string>;
 };
diff --git a/src/charts/line/Dot.tsx b/src/charts/line/Dot.tsx
index dd49d3e49231a5e4f56138bbf3ec51013515f7b0..2c240689e2b51c265dc5deab885124d3fa216424 100644
--- a/src/charts/line/Dot.tsx
+++ b/src/charts/line/Dot.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
+import * as React from "react";
 import Animated, {
   Easing,
   useAnimatedProps,
-  useDerivedValue,
+  useSharedValue,
   withRepeat,
   withSequence,
   withTiming,
-} from 'react-native-reanimated';
-import { Circle, CircleProps } from 'react-native-svg';
-import { getYForX } from 'react-native-redash';
+} from "react-native-reanimated";
+import { getYForX } from "react-native-redash";
+import { Circle, CircleProps } from "react-native-svg";
 
-import { LineChartDimensionsContext } from './Chart';
-import { LineChartPathContext } from './LineChartPathContext';
-import { useLineChart } from './useLineChart';
+import { LineChartDimensionsContext } from "./Chart";
+import { LineChartPathContext } from "./LineChartPathContext";
+import { useLineChart } from "./useLineChart";
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
@@ -33,7 +33,7 @@ export type LineChartDotProps = {
    *
    * Default: `while-inactive`
    */
-  pulseBehaviour?: 'always' | 'while-inactive';
+  pulseBehaviour?: "always" | "while-inactive";
   /**
    * Defaults to `size * 4`
    */
@@ -41,17 +41,19 @@ export type LineChartDotProps = {
   pulseDurationMs?: number;
 };
 
-LineChartDot.displayName = 'LineChartDot';
+LineChartDot.displayName = "LineChartDot";
+
+const easing = Easing.out(Easing.sin);
 
 export function LineChartDot({
   at,
-  color: defaultColor = 'black',
+  color: defaultColor = "black",
   dotProps,
   hasOuterDot: defaultHasOuterDot = false,
   hasPulse = false,
   inactiveColor,
   outerDotProps,
-  pulseBehaviour = 'while-inactive',
+  pulseBehaviour = "while-inactive",
   pulseDurationMs = 800,
   showInactiveColor = true,
   size = 4,
@@ -72,29 +74,44 @@ export function LineChartDot({
 
   ////////////////////////////////////////////////////////////
 
-  const x = useDerivedValue(
-    () => withTiming(pointWidth * at),
-    [at, pointWidth]
-  );
-  const y = useDerivedValue(
-    () => withTiming(getYForX(parsedPath!, x.value) || 0),
-    [parsedPath, x]
-  );
+  const x = pointWidth * at;
+  const y = getYForX(parsedPath!, x) ?? 0;
 
   ////////////////////////////////////////////////////////////
 
-  const animatedDotProps = useAnimatedProps(
-    () => ({
-      cx: x.value,
-      cy: y.value,
-    }),
-    [x, y]
-  );
+  const animatedOpacity = useSharedValue(0.1);
+  const animatedScale = useSharedValue(0);
+
+  React.useEffect(() => {
+    animatedOpacity.value = withRepeat(
+      withSequence(
+        withTiming(0.8, {
+          duration: 0,
+        }),
+        withTiming(0, {
+          duration: pulseDurationMs,
+          easing,
+        })
+      ),
+      -1
+    );
+
+    animatedScale.value = withRepeat(
+      withSequence(
+        withTiming(0, {
+          duration: 0,
+        }),
+        withTiming(1, {
+          duration: pulseDurationMs,
+          easing,
+        })
+      ),
+      -1
+    );
+  }, []);
 
   const animatedOuterDotProps = useAnimatedProps(() => {
     let defaultProps = {
-      cx: x.value,
-      cy: y.value,
       opacity: 0.1,
       r: outerSize,
     };
@@ -103,58 +120,35 @@ export function LineChartDot({
       return defaultProps;
     }
 
-    if (isActive.value && pulseBehaviour === 'while-inactive') {
+    if (isActive.value && pulseBehaviour === "while-inactive") {
       return {
         ...defaultProps,
         r: 0,
       };
     }
 
-    const easing = Easing.out(Easing.sin);
-    const animatedOpacity = withRepeat(
-      withSequence(
-        withTiming(0.8),
-        withTiming(0, {
-          duration: pulseDurationMs,
-          easing,
-        })
-      ),
-      -1,
-      false
-    );
-    const scale = withRepeat(
-      withSequence(
-        withTiming(0),
-        withTiming(outerSize, {
-          duration: pulseDurationMs,
-          easing,
-        })
-      ),
-      -1,
-      false
-    );
-
-    if (pulseBehaviour === 'while-inactive') {
+    if (pulseBehaviour === "while-inactive") {
       return {
         ...defaultProps,
-        opacity: isActive.value ? withTiming(0) : animatedOpacity,
-        r: isActive.value ? withTiming(0) : scale,
+        opacity: isActive.value ? withTiming(0) : animatedOpacity.value,
+        r: isActive.value ? withTiming(0) : outerSize * animatedScale.value,
       };
     }
     return {
       ...defaultProps,
-      opacity: animatedOpacity,
-      r: scale,
+      opacity: animatedOpacity.value,
+      r: outerSize * animatedScale.value,
     };
-  }, [hasPulse, isActive, outerSize, pulseBehaviour, pulseDurationMs, x, y]);
+  }, []);
 
   ////////////////////////////////////////////////////////////
 
   return (
     <>
       <AnimatedCircle
-        animatedProps={animatedDotProps}
         r={size}
+        cx={x}
+        cy={y}
         fill={color}
         opacity={opacity}
         {...dotProps}
@@ -163,6 +157,8 @@ export function LineChartDot({
         <AnimatedCircle
           animatedProps={animatedOuterDotProps}
           fill={color}
+          cx={x}
+          cy={y}
           {...outerDotProps}
         />
       )}
diff --git a/src/charts/line/Path.tsx b/src/charts/line/Path.tsx
index 5c5830792b0ac9ace3316d869b24f98400694f63..ca8a083a740f70ebe673e22820ae77db48dbe9c0 100644
--- a/src/charts/line/Path.tsx
+++ b/src/charts/line/Path.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
-import Animated from 'react-native-reanimated';
-import { Path, PathProps } from 'react-native-svg';
+import * as React from "react";
+import Animated from "react-native-reanimated";
+import { Path, PathProps } from "react-native-svg";
 
-import { LineChartDimensionsContext } from './Chart';
-import { LineChartPathContext } from './LineChartPathContext';
-import useAnimatedPath from './useAnimatedPath';
+import { LineChartDimensionsContext } from "./Chart";
+import { LineChartPathContext } from "./LineChartPathContext";
+import useAnimatedPath from "./useAnimatedPath";
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -31,10 +31,10 @@ export type LineChartPathProps = Animated.AnimateProps<PathProps> & {
   isTransitionEnabled?: boolean;
 };
 
-LineChartPath.displayName = 'LineChartPath';
+LineChartPath.displayName = "LineChartPath";
 
 export function LineChartPath({
-  color = 'black',
+  color = "black",
   inactiveColor,
   width: strokeWidth = 3,
   ...props
@@ -53,15 +53,14 @@ export function LineChartPath({
   ////////////////////////////////////////////////
 
   return (
-    <>
-      <AnimatedPath
-        animatedProps={animatedProps}
-        fill="transparent"
-        stroke={isInactive ? inactiveColor || color : color}
-        strokeOpacity={isInactive && !inactiveColor ? 0.2 : 1}
-        strokeWidth={strokeWidth}
-        {...props}
-      />
-    </>
+    <AnimatedPath
+      animatedProps={animatedProps}
+      d={isTransitionEnabled ? undefined : path}
+      fill="transparent"
+      stroke={isInactive ? inactiveColor || color : color}
+      strokeOpacity={isInactive && !inactiveColor ? 0.2 : 1}
+      strokeWidth={strokeWidth}
+      {...props}
+    />
   );
 }
