react-native-wagmi-charts 2.9.1 → 2.10.0

package/README.md

@@ -954,6 +954,7 @@ function in the form of a
 | `color`        | `string`    | `"gray"` | Color of the cursor line                                           |
 | `lineProps`    | `LineProps` |          | Props of the cursor line. Takes React Native SVG's `Line` props.   |
 | `persistOnEnd` | `boolean`   | `false`  | Keep the cursor pinned at its last position after the gesture ends |
+| `showLabel`    | `boolean`   | `true`   | Show the bottom label for timestamp                                |
 | `at`           | `number`    |          | Index of followed `data` item.                                     |
 
 ### LineChart.Dot

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-wagmi-charts",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "A sweet candlestick chart for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/charts/line/CursorLine.tsx

@@ -18,6 +18,7 @@ import { useLineChartPrice } from './usePrice';
 type LineChartCursorLineProps = {
   children?: React.ReactNode;
   color?: string;
+  showLabel?: boolean;
   lineProps?: Partial<LineProps>;
   format?: TFormatterFn<string | number>;
   textStyle?: TextStyle;
@@ -48,6 +49,7 @@ const AnimatedLine = Animated.createAnimatedComponent(SVGLine);
 export function LineChartCursorLine({
   children,
   color = 'gray',
+  showLabel = true,
   lineProps,
   format,
   textStyle,
@@ -105,7 +107,7 @@ export function LineChartCursorLine({
     if (isHorizontal) return 0;
 
     // For vertical cursor, extend line to the chart area (excluding reserved label space)
-    return height - SPACING.X_AXIS_LABEL_RESERVED_HEIGHT;
+    return showLabel ? height - SPACING.X_AXIS_LABEL_RESERVED_HEIGHT : height;
   });
 
   const containerStyle = useAnimatedStyle(() => ({
@@ -208,7 +210,9 @@ export function LineChartCursorLine({
             {...lineProps}
           />
         </Svg>
-        <AnimatedText text={displayText} style={textPositionStyle} />
+        {showLabel && (
+          <AnimatedText text={displayText} style={textPositionStyle} />
+        )}
       </Animated.View>
       {children}
     </LineChartCursor>

package/src/charts/line/HorizontalLine.tsx

@@ -55,6 +55,9 @@ export function LineChartHorizontalLine({
   );
   const { yDomain } = useLineChart();
 
+  // Reserve space at the bottom for x-axis cursor labels
+  const X_AXIS_LABEL_RESERVED_HEIGHT = 40;
+
   const y = useDerivedValue(() => {
     if (typeof at === 'number' || at.index != null) {
       const index = typeof at === 'number' ? at : at.index;
@@ -74,7 +77,8 @@ export function LineChartHorizontalLine({
 
     const offsetTop = yDomain.max - at.value;
     const percentageOffsetTop = offsetTop / (yDomain.max - yDomain.min);
-    const heightBetweenGutters = height - gutter * 2;
+    const chartDrawingHeight = height - X_AXIS_LABEL_RESERVED_HEIGHT;
+    const heightBetweenGutters = chartDrawingHeight - gutter * 2;
     const offsetTopPixels = gutter + percentageOffsetTop * heightBetweenGutters;
 
     return withTiming(offsetTopPixels + offsetY);