@coinbase/cds-mobile-visualization 3.4.0-beta.18 → 3.4.0-beta.19

package/esm/chart/bar/__stories__/BarChart.stories.js

@@ -1,20 +1,29 @@
 const _excluded = ["children"],
-  _excluded2 = ["animate"];
+  _excluded2 = ["animate"],
+  _excluded3 = ["x", "y", "width", "height", "originY", "dataX"],
+  _excluded4 = ["data", "height"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { memo, useEffect, useState } from 'react';
-import { Button } from '@coinbase/cds-mobile/buttons';
-import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { useDerivedValue } from 'react-native-reanimated';
+import { candles as btcCandles } from '@coinbase/cds-common/internal/data/candles';
+import { Button, IconButton } from '@coinbase/cds-mobile/buttons';
+import { ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { VStack } from '@coinbase/cds-mobile/layout';
+import { Box, HStack, VStack } from '@coinbase/cds-mobile/layout';
+import { Text } from '@coinbase/cds-mobile/typography';
+import { Line as SkiaLine, Rect } from '@shopify/react-native-skia';
 import { XAxis, YAxis } from '../../axis';
 import { CartesianChart } from '../../CartesianChart';
+import { useCartesianChartContext } from '../../ChartProvider';
 import { ReferenceLine, SolidLine } from '../../line';
+import { Scrubber } from '../../scrubber';
+import { getPointOnSerializableScale, unwrapAnimatedValue, useScrubberContext } from '../../utils';
 import { Bar } from '../Bar';
 import { BarChart } from '../BarChart';
 import { BarPlot } from '../BarPlot';
 import { DefaultBarStack } from '../DefaultBarStack';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
   strokeWidth: 1
 })));
@@ -649,49 +658,386 @@ const BandGridPositionExample = _ref6 => {
     }), /*#__PURE__*/_jsx(BarPlot, {})]
   });
 };
-const BarChartStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic",
-      children: /*#__PURE__*/_jsx(UpdatingChartValues, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Animated Auto-Updating",
-      children: /*#__PURE__*/_jsx(AnimatedUpdatingChartValues, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Negative Values with Top Axis",
-      children: /*#__PURE__*/_jsx(NegativeValuesWithTopAxis, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Positive and Negative Cash Flow",
-      children: /*#__PURE__*/_jsx(PositiveAndNegativeCashFlow, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Fiat & Stablecoin Balance",
-      children: /*#__PURE__*/_jsx(FiatAndStablecoinBalance, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Monthly Rewards",
-      children: /*#__PURE__*/_jsx(MonthlyRewards, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Multiple Y Axes",
-      children: /*#__PURE__*/_jsx(MultipleYAxes, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Y-Axis Continuous ColorMap",
-      children: /*#__PURE__*/_jsx(YAxisContinuousColorMap, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Y-Axis Discrete ColorMap",
-      children: /*#__PURE__*/_jsx(YAxisDiscreteColorMap, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "X-Axis Continuous ColorMap",
-      children: /*#__PURE__*/_jsx(XAxisContinuousColorMap, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "X-Axis Discrete ColorMap",
-      children: /*#__PURE__*/_jsx(XAxisDiscreteColorMap, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "X-Axis Multi-Segment ColorMap",
-      children: /*#__PURE__*/_jsx(XAxisMultiSegmentColorMap, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "ColorMap with Opacity",
-      children: /*#__PURE__*/_jsx(ColorMapWithOpacity, {})
-    }), /*#__PURE__*/_jsxs(Example, {
-      title: "Band Grid Position",
+
+// --- Composed Examples ---
+
+const candlestickStockData = btcCandles.slice(0, 90).reverse();
+const CandlesticksHeader = /*#__PURE__*/memo(_ref7 => {
+  let {
+    currentIndex
+  } = _ref7;
+  const formatPrice = useCallback(price => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(parseFloat(price));
+  }, []);
+  const formatThousandsPriceNumber = useCallback(price => {
+    const formattedPrice = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(price / 1000);
+    return formattedPrice + "k";
+  }, []);
+  const currentText = useMemo(() => {
+    if (currentIndex !== undefined) {
+      return "Open: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].open)) + ", Close: " + formatThousandsPriceNumber(parseFloat(candlestickStockData[currentIndex].close)) + ", Volume: " + (parseFloat(candlestickStockData[currentIndex].volume) / 1000).toFixed(2) + "k";
+    }
+    return formatPrice(candlestickStockData[candlestickStockData.length - 1].close);
+  }, [currentIndex, formatThousandsPriceNumber, formatPrice]);
+  return /*#__PURE__*/_jsx(Text, {
+    "aria-live": "polite",
+    font: "headline",
+    children: currentText
+  });
+});
+const CandlesticksChart = /*#__PURE__*/memo(_ref8 => {
+  let {
+    infoTextId,
+    onScrubberPositionChange
+  } = _ref8;
+  const theme = useTheme();
+  const min = useMemo(() => Math.min(...candlestickStockData.map(data => parseFloat(data.low))), []);
+  const CandleThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+    strokeWidth: 1
+  })));
+  const BandwidthHighlight = /*#__PURE__*/memo(_ref9 => {
+    let {
+      stroke
+    } = _ref9;
+    const {
+      getXSerializableScale,
+      drawingArea
+    } = useCartesianChartContext();
+    const {
+      scrubberPosition
+    } = useScrubberContext();
+    const xScale = useMemo(() => getXSerializableScale(), [getXSerializableScale]);
+    const rectWidth = useMemo(() => {
+      if (xScale !== undefined && xScale.type === 'band') {
+        return xScale.bandwidth;
+      }
+      return 0;
+    }, [xScale]);
+    const xPos = useDerivedValue(() => {
+      const position = unwrapAnimatedValue(scrubberPosition);
+      const xPos = position !== undefined && xScale ? getPointOnSerializableScale(position, xScale) : undefined;
+      return xPos !== undefined ? xPos - rectWidth / 2 : 0;
+    }, [scrubberPosition, xScale]);
+    const opacity = useDerivedValue(() => xPos.value !== undefined ? 1 : 0, [xPos]);
+    return /*#__PURE__*/_jsx(Rect, {
+      color: stroke,
+      height: drawingArea.height,
+      opacity: opacity,
+      width: rectWidth,
+      x: xPos,
+      y: drawingArea.y
+    });
+  });
+  const candlesData = useMemo(() => candlestickStockData.map(data => [parseFloat(data.low), parseFloat(data.high)]), []);
+  const CandlestickBarComponent = /*#__PURE__*/memo(_ref0 => {
+    var _yScale, _yScale2;
+    let {
+        x,
+        y,
+        width,
+        height,
+        dataX
+      } = _ref0,
+      props = _objectWithoutPropertiesLoose(_ref0, _excluded3);
+    const {
+      getYScale
+    } = useCartesianChartContext();
+    const yScale = getYScale();
+    const wickX = x + width / 2;
+    const timePeriodValue = candlestickStockData[dataX];
+    const open = parseFloat(timePeriodValue.open);
+    const close = parseFloat(timePeriodValue.close);
+    const bullish = open < close;
+    const theme = useTheme();
+    const color = bullish ? theme.color.fgPositive : theme.color.fgNegative;
+    const openY = (_yScale = yScale == null ? void 0 : yScale(open)) != null ? _yScale : 0;
+    const closeY = (_yScale2 = yScale == null ? void 0 : yScale(close)) != null ? _yScale2 : 0;
+    const bodyHeight = Math.abs(openY - closeY);
+    const bodyY = openY < closeY ? openY : closeY;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(SkiaLine, {
+        color: color,
+        p1: {
+          x: wickX,
+          y
+        },
+        p2: {
+          x: wickX,
+          y: y + height
+        },
+        strokeWidth: 1
+      }), /*#__PURE__*/_jsx(Rect, {
+        color: color,
+        height: bodyHeight,
+        width: width,
+        x: x,
+        y: bodyY
+      })]
+    });
+  });
+  const formatThousandsPriceNumber = useCallback(price => {
+    const formattedPrice = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(price / 1000);
+    return formattedPrice + "k";
+  }, []);
+  const formatTime = useCallback(index => {
+    if (index === null || index === undefined || index >= candlestickStockData.length) return '';
+    const ts = parseInt(candlestickStockData[index].start);
+    return new Date(ts * 1000).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+  }, []);
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    enableScrubbing: true,
+    animate: false,
+    "aria-labelledby": infoTextId,
+    borderRadius: 0,
+    height: 150,
+    inset: {
+      top: 8,
+      bottom: 8,
+      left: 0,
+      right: 0
+    },
+    onScrubberPositionChange: onScrubberPositionChange,
+    series: [{
+      id: 'stock-prices',
+      data: candlesData
+    }],
+    xAxis: {
+      scaleType: 'band'
+    },
+    yAxis: {
+      domain: {
+        min
+      }
+    },
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      tickLabelFormatter: formatTime
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      GridLineComponent: CandleThinSolidLine,
+      tickLabelFormatter: formatThousandsPriceNumber,
+      width: 40
+    }), /*#__PURE__*/_jsx(Scrubber, {
+      hideOverlay: true,
+      LineComponent: BandwidthHighlight,
+      lineStroke: theme.color.fgMuted,
+      seriesIds: []
+    }), /*#__PURE__*/_jsx(BarPlot, {
+      BarComponent: CandlestickBarComponent,
+      BarStackComponent: _ref1 => {
+        let {
+          children
+        } = _ref1;
+        return /*#__PURE__*/_jsx(_Fragment, {
+          children: children
+        });
+      }
+    })]
+  });
+});
+const Candlesticks = () => {
+  const infoTextId = useId();
+  const [currentIndex, setCurrentIndex] = useState();
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(CandlesticksHeader, {
+      currentIndex: currentIndex
+    }), /*#__PURE__*/_jsx(CandlesticksChart, {
+      infoTextId: infoTextId,
+      onScrubberPositionChange: setCurrentIndex
+    })]
+  });
+};
+const DAY_LENGTH_MINUTES = 1440;
+const sunlightData = [{
+  label: 'Jan',
+  value: 598
+}, {
+  label: 'Feb',
+  value: 635
+}, {
+  label: 'Mar',
+  value: 688
+}, {
+  label: 'Apr',
+  value: 753
+}, {
+  label: 'May',
+  value: 812
+}, {
+  label: 'Jun',
+  value: 855
+}, {
+  label: 'Jul',
+  value: 861
+}, {
+  label: 'Aug',
+  value: 828
+}, {
+  label: 'Sep',
+  value: 772
+}, {
+  label: 'Oct',
+  value: 710
+}, {
+  label: 'Nov',
+  value: 648
+}, {
+  label: 'Dec',
+  value: 605
+}];
+const SunlightChartInner = /*#__PURE__*/memo(_ref10 => {
+  let {
+      data,
+      height = 300
+    } = _ref10,
+    props = _objectWithoutPropertiesLoose(_ref10, _excluded4);
+  const theme = useTheme();
+  const SunlightThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
+    strokeWidth: 1
+  })));
+  return /*#__PURE__*/_jsxs(CartesianChart, _extends({}, props, {
+    height: height,
+    series: [{
+      id: 'sunlight',
+      data: data.map(_ref11 => {
+        let {
+          value
+        } = _ref11;
+        return value;
+      }),
+      yAxisId: 'sunlight',
+      color: "rgb(" + theme.spectrum.yellow40 + ")"
+    }, {
+      id: 'day',
+      data: data.map(() => DAY_LENGTH_MINUTES),
+      yAxisId: 'day',
+      color: "rgb(" + theme.spectrum.blue100 + ")"
+    }],
+    xAxis: _extends({}, props.xAxis, {
+      scaleType: 'band',
+      data: data.map(_ref12 => {
+        let {
+          label
+        } = _ref12;
+        return label;
+      })
+    }),
+    yAxis: [{
+      id: 'day',
+      domain: {
+        min: 0,
+        max: DAY_LENGTH_MINUTES
+      },
+      domainLimit: 'strict'
+    }, {
+      id: 'sunlight',
+      domain: {
+        min: 0,
+        max: DAY_LENGTH_MINUTES
+      },
+      domainLimit: 'strict'
+    }],
+    children: [/*#__PURE__*/_jsx(YAxis, {
+      showGrid: true,
+      showLine: true,
+      GridLineComponent: SunlightThinSolidLine,
+      axisId: "day",
+      position: "left"
+    }), /*#__PURE__*/_jsx(XAxis, {
+      showLine: true
+    }), /*#__PURE__*/_jsx(BarPlot, {
+      seriesIds: ['day'],
+      transitions: {
+        enter: null
+      }
+    }), /*#__PURE__*/_jsx(BarPlot, {
+      borderRadius: 0,
+      seriesIds: ['sunlight'],
+      transitions: {
+        enter: {
+          type: 'spring',
+          stiffness: 700,
+          damping: 40,
+          staggerDelay: 1
+        }
+      }
+    })]
+  }));
+});
+const SunlightChart = () => {
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(SunlightChartInner, {
+      data: sunlightData
+    }), /*#__PURE__*/_jsx(Text, {
+      color: "fgMuted",
+      font: "caption",
+      textAlign: "center",
+      children: "2026 Sunlight data for the first day of each month in Atlanta, Georgia, provided by NOAA."
+    })]
+  });
+};
+function ExampleNavigator() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    title: 'Basic',
+    component: /*#__PURE__*/_jsx(UpdatingChartValues, {})
+  }, {
+    title: 'Animated Auto-Updating',
+    component: /*#__PURE__*/_jsx(AnimatedUpdatingChartValues, {})
+  }, {
+    title: 'Negative Values with Top Axis',
+    component: /*#__PURE__*/_jsx(NegativeValuesWithTopAxis, {})
+  }, {
+    title: 'Positive and Negative Cash Flow',
+    component: /*#__PURE__*/_jsx(PositiveAndNegativeCashFlow, {})
+  }, {
+    title: 'Fiat & Stablecoin Balance',
+    component: /*#__PURE__*/_jsx(FiatAndStablecoinBalance, {})
+  }, {
+    title: 'Monthly Rewards',
+    component: /*#__PURE__*/_jsx(MonthlyRewards, {})
+  }, {
+    title: 'Multiple Y Axes',
+    component: /*#__PURE__*/_jsx(MultipleYAxes, {})
+  }, {
+    title: 'Y-Axis Continuous ColorMap',
+    component: /*#__PURE__*/_jsx(YAxisContinuousColorMap, {})
+  }, {
+    title: 'Y-Axis Discrete ColorMap',
+    component: /*#__PURE__*/_jsx(YAxisDiscreteColorMap, {})
+  }, {
+    title: 'X-Axis Continuous ColorMap',
+    component: /*#__PURE__*/_jsx(XAxisContinuousColorMap, {})
+  }, {
+    title: 'X-Axis Discrete ColorMap',
+    component: /*#__PURE__*/_jsx(XAxisDiscreteColorMap, {})
+  }, {
+    title: 'X-Axis Multi-Segment ColorMap',
+    component: /*#__PURE__*/_jsx(XAxisMultiSegmentColorMap, {})
+  }, {
+    title: 'ColorMap with Opacity',
+    component: /*#__PURE__*/_jsx(ColorMapWithOpacity, {})
+  }, {
+    title: 'Band Grid Position',
+    component: /*#__PURE__*/_jsxs(VStack, {
+      gap: 2,
       children: [/*#__PURE__*/_jsx(BandGridPositionExample, {
         position: "edges"
       }), /*#__PURE__*/_jsx(BandGridPositionExample, {
@@ -701,7 +1047,57 @@ const BarChartStories = () => {
       }), /*#__PURE__*/_jsx(BandGridPositionExample, {
         position: "end"
       })]
-    })]
+    })
+  }, {
+    title: 'Candlesticks',
+    component: /*#__PURE__*/_jsx(Candlesticks, {})
+  }, {
+    title: 'Monthly Sunlight',
+    component: /*#__PURE__*/_jsx(SunlightChart, {})
+  }], []);
+  const currentExample = examples[currentIndex];
+  const handlePrevious = useCallback(() => {
+    setCurrentIndex(prev => (prev - 1 + examples.length) % examples.length);
+  }, [examples.length]);
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => (prev + 1 + examples.length) % examples.length);
+  }, [examples.length]);
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    paddingX: 0,
+    children: /*#__PURE__*/_jsxs(VStack, {
+      gap: 4,
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: 2,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to previous example",
+          accessibilityLabel: "Previous",
+          name: "arrowLeft",
+          onPress: handlePrevious,
+          variant: "secondary"
+        }), /*#__PURE__*/_jsxs(VStack, {
+          alignItems: "center",
+          children: [/*#__PURE__*/_jsx(Text, {
+            font: "title3",
+            children: currentExample.title
+          }), /*#__PURE__*/_jsxs(Text, {
+            color: "fgMuted",
+            font: "label1",
+            children: [currentIndex + 1, " / ", examples.length]
+          })]
+        }), /*#__PURE__*/_jsx(IconButton, {
+          accessibilityHint: "Navigate to next example",
+          accessibilityLabel: "Next",
+          name: "arrowRight",
+          onPress: handleNext,
+          variant: "secondary"
+        })]
+      }), /*#__PURE__*/_jsx(Box, {
+        padding: 1,
+        children: currentExample.component
+      })]
+    })
   });
-};
-export default BarChartStories;
+}
+export default ExampleNavigator;

package/esm/chart/line/DottedLine.js

@@ -1,4 +1,4 @@
-const _excluded = ["fill", "stroke", "dashIntervals", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "d", "animate", "transition"];
+const _excluded = ["fill", "stroke", "dashIntervals", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "d", "animate", "transitions", "transition"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo } from 'react';
@@ -24,6 +24,7 @@ export const DottedLine = /*#__PURE__*/memo(_ref => {
       yAxisId,
       d,
       animate,
+      transitions,
       transition
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -38,7 +39,8 @@ export const DottedLine = /*#__PURE__*/memo(_ref => {
     strokeJoin: strokeJoin,
     strokeOpacity: strokeOpacity,
     strokeWidth: strokeWidth,
-    transition: transition
+    transition: transition,
+    transitions: transitions
   }, props, {
     children: [/*#__PURE__*/_jsx(DashPathEffect, {
       intervals: dashIntervals

package/esm/chart/line/Line.js

@@ -1,14 +1,13 @@
-const _excluded = ["seriesId", "curve", "type", "areaType", "areaBaseline", "stroke", "strokeOpacity", "showArea", "LineComponent", "AreaComponent", "opacity", "points", "connectNulls", "transition", "gradient"];
+const _excluded = ["seriesId", "curve", "type", "areaType", "areaBaseline", "stroke", "strokeOpacity", "showArea", "LineComponent", "AreaComponent", "opacity", "points", "connectNulls", "transitions", "transition", "gradient"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { memo, useEffect, useMemo } from 'react';
-import { useSharedValue, withDelay, withTiming } from 'react-native-reanimated';
+import React, { memo, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile';
 import { Group } from '@shopify/react-native-skia';
 import { Area } from '../area/Area';
 import { useCartesianChartContext } from '../ChartProvider';
 import { Point } from '../point';
-import { accessoryFadeTransitionDelay, accessoryFadeTransitionDuration, getLineData, getLinePath } from '../utils';
+import { getLineData, getLinePath } from '../utils';
 import { evaluateGradientAtValue, getGradientStops } from '../utils/gradient';
 import { convertToSerializableScale } from '../utils/scale';
 import { DottedLine } from './DottedLine';
@@ -30,6 +29,7 @@ export const Line = /*#__PURE__*/memo(_ref => {
       opacity = 1,
       points,
       connectNulls,
+      transitions,
       transition,
       gradient: gradientProp
     } = _ref,
@@ -43,19 +43,6 @@ export const Line = /*#__PURE__*/memo(_ref => {
     getYScale,
     getXAxis
   } = useCartesianChartContext();
-  const isReady = !!getXScale();
-
-  // Animation state for delayed point rendering (matches web timing)
-  const pointsOpacity = useSharedValue(animate ? 0 : 1);
-
-  // Delay point appearance until after path enter animation completes
-  useEffect(() => {
-    if (animate && isReady) {
-      pointsOpacity.value = withDelay(accessoryFadeTransitionDelay, withTiming(1, {
-        duration: accessoryFadeTransitionDuration
-      }));
-    }
-  }, [animate, isReady, pointsOpacity]);
   const matchedSeries = useMemo(() => getSeries(seriesId), [getSeries, seriesId]);
   const gradient = useMemo(() => gradientProp != null ? gradientProp : matchedSeries == null ? void 0 : matchedSeries.gradient, [gradientProp, matchedSeries == null ? void 0 : matchedSeries.gradient]);
   const sourceData = useMemo(() => getSeriesData(seriesId), [getSeriesData, seriesId]);
@@ -124,6 +111,7 @@ export const Line = /*#__PURE__*/memo(_ref => {
       gradient: gradient,
       seriesId: seriesId,
       transition: transition,
+      transitions: transitions,
       type: areaType
     }), /*#__PURE__*/_jsx(LineComponent, _extends({
       d: path,
@@ -131,9 +119,9 @@ export const Line = /*#__PURE__*/memo(_ref => {
       stroke: stroke,
       strokeOpacity: strokeOpacity != null ? strokeOpacity : opacity,
       transition: transition,
+      transitions: transitions,
       yAxisId: matchedSeries == null ? void 0 : matchedSeries.yAxisId
     }, props)), points && /*#__PURE__*/_jsx(Group, {
-      opacity: pointsOpacity,
       children: chartData.map((value, index) => {
         if (value === null) return;
         const xValue = xData && xData[index] !== undefined ? xData[index] : index;

package/esm/chart/line/SolidLine.js

@@ -1,4 +1,4 @@
-const _excluded = ["fill", "stroke", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "d", "animate", "transition"];
+const _excluded = ["fill", "stroke", "strokeCap", "strokeJoin", "strokeOpacity", "strokeWidth", "gradient", "yAxisId", "d", "animate", "transitions", "transition"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo } from 'react';
@@ -22,6 +22,7 @@ export const SolidLine = /*#__PURE__*/memo(_ref => {
       yAxisId,
       d,
       animate,
+      transitions,
       transition
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
@@ -36,7 +37,8 @@ export const SolidLine = /*#__PURE__*/memo(_ref => {
     strokeJoin: strokeJoin,
     strokeOpacity: strokeOpacity,
     strokeWidth: strokeWidth,
-    transition: transition
+    transition: transition,
+    transitions: transitions
   }, props, {
     children: gradient && /*#__PURE__*/_jsx(Gradient, {
       gradient: gradient,