@ledgerhq/lumen-ui-rnative-visualization 0.1.14 → 0.1.15

package/dist/typescript/src/lib/utils/ticks/ticks.d.ts

@@ -1,4 +1,5 @@
-import type { AxisConfigProps, ChartScaleFunction, DrawingArea } from '../types';
+import type { BaseAxisProps } from '../../Components/Axis';
+import type { ChartScaleFunction, DrawingArea } from '../types';
 export declare const APPROXIMATE_TICK_COUNT = 5;
 export type TickData = {
     position: number;
@@ -7,9 +8,16 @@ export type TickData = {
 };
 /**
  * Resolves which numeric tick values should appear on the axis.
- * Explicit ticks take priority, then scale-specific defaults.
+ *
+ * Priority:
+ * 1. Explicit `ticks` provided by the consumer.
+ * 2. Axis `data` — when provided, ticks come from the data itself (numeric
+ *    values for numeric data, indices for string data) so the rendered ticks
+ *    mirror exactly what the consumer asked for, with no d3-invented
+ *    intermediate values.
+ * 3. Scale-specific defaults (band domain, or `scale.ticks()` for numeric).
  */
-export declare const getTickValues: (scale: ChartScaleFunction, explicitTicks?: number[]) => number[];
+export declare const getTickValues: (scale: ChartScaleFunction, explicitTicks?: number[], axisData?: BaseAxisProps["data"]) => number[];
 /**
  * Converts a tick value to its pixel position on the axis.
  * Band scales are centered within the band.
@@ -19,11 +27,11 @@ export declare const getTickPosition: (scale: ChartScaleFunction, tick: number)
  * Resolves the display label for a tick value.
  * Priority: formatter > string label lookup > raw value.
  */
-export declare const getTickLabel: (tick: number, axisData: AxisConfigProps["data"], formatter?: (value: number | string) => string) => string;
+export declare const getTickLabel: (tick: number, axisData: BaseAxisProps["data"], formatter?: (value: number | string) => string) => string;
 /**
  * Builds the complete tick data array from a scale and axis configuration.
  */
-export declare const buildTicksData: (scale: ChartScaleFunction, axisConfig?: AxisConfigProps, explicitTicks?: number[], formatter?: (value: number | string) => string) => TickData[];
+export declare const buildTicksData: (scale: ChartScaleFunction, axisConfig?: BaseAxisProps, explicitTicks?: number[], formatter?: (value: number | string) => string) => TickData[];
 /**
  * Excludes the X grid line at the Y-axis origin (left edge)
  * to prevent overlap with the Y-axis solid line.

package/dist/typescript/src/lib/utils/ticks/ticks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ticks.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/ticks/ticks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,eAAe,EACf,kBAAkB,EAClB,WAAW,EACZ,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,kBAAkB,EACzB,gBAAgB,MAAM,EAAE,KACvB,MAAM,EAKR,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,kBAAkB,EACzB,MAAM,MAAM,KACX,MAKF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GACvB,MAAM,MAAM,EACZ,UAAU,eAAe,CAAC,MAAM,CAAC,EACjC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,MAeF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,kBAAkB,EACzB,aAAa,eAAe,EAC5B,gBAAgB,MAAM,EAAE,EACxB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,QAAQ,EASV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,QAAQ,EACd,aAAa,WAAW,KACvB,OAEF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,QAAQ,EACd,aAAa,WAAW,KACvB,OAEF,CAAC"}
+{"version":3,"file":"ticks.d.ts","sourceRoot":"","sources":["../../../../../../src/lib/utils/ticks/ticks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEhE,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GACxB,OAAO,kBAAkB,EACzB,gBAAgB,MAAM,EAAE,EACxB,WAAW,aAAa,CAAC,MAAM,CAAC,KAC/B,MAAM,EAUR,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,OAAO,kBAAkB,EACzB,MAAM,MAAM,KACX,MAKF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,GACvB,MAAM,MAAM,EACZ,UAAU,aAAa,CAAC,MAAM,CAAC,EAC/B,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,MAeF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GACzB,OAAO,kBAAkB,EACzB,aAAa,aAAa,EAC1B,gBAAgB,MAAM,EAAE,EACxB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,KAC7C,QAAQ,EASV,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,QAAQ,EACd,aAAa,WAAW,KACvB,OAEF,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAClC,MAAM,QAAQ,EACd,aAAa,WAAW,KACvB,OAEF,CAAC"}

package/dist/typescript/src/lib/utils/types.d.ts

@@ -1,8 +1,5 @@
 import type { ScaleBand, ScaleLinear, ScaleLogarithmic } from 'd3-scale';
-export type AxisBounds = {
-    min: number;
-    max: number;
-};
+import type { BaseAxisProps } from '../Components/Axis';
 export type ChartInset = {
     top: number;
     right: number;
@@ -36,28 +33,6 @@ export type Series = {
      */
     stroke: string;
 };
-export type AxisConfigProps = {
-    /**
-     * Scale algorithm used by this axis.
-     * @default 'linear'
-     */
-    scaleType?: 'linear' | 'log' | 'band';
-    /**
-     * Explicit data values for band scales or category labels.
-     * For band scales, provides the discrete domain. For numeric scales, string values
-     * are used as tick labels at corresponding indices.
-     */
-    data?: string[] | number[];
-    /**
-     * Fixed domain bounds or a function that adjusts the computed bounds.
-     * A partial object overrides only the specified bound(s).
-     * A function receives the auto-computed bounds and returns adjusted ones.
-     *
-     * The final domain is always rounded to nice boundaries via d3's `.nice()`,
-     * ensuring tick marks land on clean values (e.g. `[4, 98]` becomes `[0, 100]`).
-     */
-    domain?: Partial<AxisBounds> | ((bounds: AxisBounds) => AxisBounds);
-};
 export type NumericScale = ScaleLinear<number, number> | ScaleLogarithmic<number, number>;
 export type CategoricalScale = ScaleBand<number>;
 export type ChartScaleFunction = NumericScale | CategoricalScale;
@@ -81,11 +56,11 @@ export type CartesianChartContextValue = {
     /**
      * Returns the x-axis config. Accepts an optional axis ID for future multi-axis support.
      */
-    getXAxisConfig: (id?: string) => AxisConfigProps | undefined;
+    getXAxisConfig: (id?: string) => BaseAxisProps | undefined;
     /**
      * Returns the y-axis config. Accepts an optional axis ID for future multi-axis support.
      */
-    getYAxisConfig: (id?: string) => AxisConfigProps | undefined;
+    getYAxisConfig: (id?: string) => BaseAxisProps | undefined;
     /**
      * Pixel bounds of the drawable region.
      */

package/dist/typescript/src/lib/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEzE,MAAM,MAAM,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;IACtC;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAAC;IAC3B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,UAAU,KAAK,UAAU,CAAC,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,eAAe,GAAG,SAAS,CAAC;IAC7D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,eAAe,GAAG,SAAS,CAAC;IAC7D;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,MAAM,UAAU,GAAG;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG;IACnB;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GAC3B,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErC,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,gBAAgB,CAAC;AAEjE,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/lumen-ui-rnative-visualization",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "license": "Apache-2.0",
   "sideEffects": false,
   "keywords": [
@@ -31,7 +31,7 @@
     "!**/*.tsbuildinfo"
   ],
   "dependencies": {
-    "@ledgerhq/lumen-utils-shared": "0.1.4",
+    "@ledgerhq/lumen-utils-shared": "0.1.5",
     "d3-array": "^3.2.4",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0"
@@ -44,8 +44,8 @@
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",
-    "@ledgerhq/lumen-design-core": "0.1.15",
-    "@ledgerhq/lumen-ui-rnative": "0.1.37",
+    "@ledgerhq/lumen-design-core": "0.1.16",
+    "@ledgerhq/lumen-ui-rnative": "0.1.38",
     "react": "^19.0.0",
     "react-native": "~0.79.7",
     "react-native-svg": "^15.0.0",

package/src/lib/Components/Axis/Axis.constants.ts

@@ -0,0 +1,23 @@
+import type { XAxisProps } from './XAxis';
+import { DEFAULT_AXIS_WIDTH } from './YAxis';
+
+import type { YAxisProps } from './YAxis';
+
+export const defaultXAxisProps: XAxisProps = {
+  position: 'bottom',
+  showGrid: false,
+  showLine: false,
+  showTickMark: false,
+  scaleType: 'linear',
+  nice: false,
+};
+
+export const defaultYAxisProps: YAxisProps = {
+  position: 'start',
+  showGrid: false,
+  showLine: false,
+  showTickMark: false,
+  scaleType: 'linear',
+  nice: true,
+  width: DEFAULT_AXIS_WIDTH,
+};

package/src/lib/Components/Axis/Axis.types.ts

@@ -1,3 +1,8 @@
+export type AxisBounds = {
+  min: number;
+  max: number;
+};
+
 export type BaseAxisProps = {
   /**
    * Whether to render grid lines at each tick.
@@ -29,4 +34,39 @@ export type BaseAxisProps = {
    * Receives the raw tick value (number or string label) and must return a string.
    */
   tickLabelFormatter?: (value: number | string) => string;
+  /**
+   * Scale algorithm used by this axis.
+   * @default 'linear'
+   */
+  scaleType?: 'linear' | 'log' | 'band';
+  /**
+   * Explicit data values for band scales or category labels.
+   * For band scales, provides the discrete domain. For numeric scales, string values
+   * are used as tick labels at corresponding indices.
+   */
+  data?: string[] | number[];
+  /**
+   * Fixed domain bounds or a function that adjusts the computed bounds.
+   * A partial object overrides only the specified bound(s).
+   * A function receives the auto-computed bounds and returns adjusted ones.
+   *
+   * Applied before {@link BaseAxisProps.nice}. To keep your bounds exactly as
+   * provided, set `nice: false` alongside a full `{ min, max }` override.
+   */
+  domain?: Partial<AxisBounds> | ((bounds: AxisBounds) => AxisBounds);
+  /**
+   * Round the domain outward to clean boundaries via d3's `.nice()`
+   * (e.g. `[4, 98]` becomes `[0, 100]`).
+   *
+   * Defaults to `true` for Y Axis and `false` for X Axis.
+   *
+   * Set to `false` to keep the domain exactly as provided
+   * so data fills the plot area boundary-to-boundary — typically only useful
+   * when you also pass a full `domain: { min, max }` and don't have overlays
+   * (reference lines, scrubber positions, annotations) that may sit outside
+   * the data range.
+   *
+   * Applied after any {@link BaseAxisProps.domain} override.
+   */
+  nice?: boolean;
 };

package/src/lib/Components/Axis/index.ts

@@ -0,0 +1,2 @@
+export * from './Axis.types';
+export * from './Axis.constants';

package/src/lib/Components/CartesianChart/CartesianChart.tsx

@@ -2,13 +2,15 @@ import { useCallback, useMemo, useState } from 'react';
 import { View, type LayoutChangeEvent } from 'react-native';
 import { Svg } from 'react-native-svg';
 
+import { MagneticPointsProvider } from '../Point/pointContext';
 import { ScrubberProvider } from '../Scrubber/ScrubberProvider';
 import { CartesianChartProvider, useBuildChartContext } from './context';
 import { RevealClipDefs } from './RevealClip';
 import type { CartesianChartProps } from './types';
 import {
   DEFAULT_HEIGHT,
-  OVERFLOW_NEGATIVE_MARGIN,
+  OVERFLOW_BUFFER,
+  OVERFLOW_OFFSET,
   resolveAxisPadding,
   resolveInset,
 } from './utils';
@@ -26,6 +28,7 @@ export function CartesianChart({
   enableScrubbing = false,
   onScrubberPositionChange,
   animate = true,
+  magnetRadius,
 }: Readonly<CartesianChartProps>) {
   const [measuredWidth, setMeasuredWidth] = useState<number | undefined>(width);
 
@@ -41,6 +44,15 @@ export function CartesianChart({
 
   const resolvedWidth = width ?? measuredWidth ?? 0;
 
+  // The SVG canvas is enlarged by the overflow buffer on every side so edge
+  // content (labels, points, ticks) is not clipped, then shifted back by
+  // `OVERFLOW_OFFSET` so the drawing area still spans the container footprint.
+  const svgWidth =
+    resolvedWidth > 0
+      ? resolvedWidth + OVERFLOW_BUFFER.left + OVERFLOW_BUFFER.right
+      : 0;
+  const svgHeight = height + OVERFLOW_BUFFER.top + OVERFLOW_BUFFER.bottom;
+
   const resolvedInset = useMemo(() => resolveInset(inset), [inset]);
   const resolvedAxisPadding = useMemo(
     () => resolveAxisPadding(axisPadding),
@@ -51,8 +63,8 @@ export function CartesianChart({
     series,
     xAxis,
     yAxis,
-    width: resolvedWidth,
-    height,
+    width: svgWidth,
+    height: svgHeight,
     inset: resolvedInset,
     axisPadding: resolvedAxisPadding,
   });
@@ -66,32 +78,36 @@ export function CartesianChart({
       style={{
         width: needsMeasurement ? undefined : resolvedWidth,
         height,
-        ...OVERFLOW_NEGATIVE_MARGIN,
+        overflow: 'visible',
       }}
     >
       {resolvedWidth > 0 && (
         <CartesianChartProvider value={contextValue}>
-          <ScrubberProvider
-            width={resolvedWidth}
-            height={height}
-            enableScrubbing={enableScrubbing}
-            onScrubberPositionChange={onScrubberPositionChange}
-          >
-            <Svg
-              testID='chart-svg'
-              width={resolvedWidth}
-              height={height}
-              style={{ overflow: 'visible' }}
+          <MagneticPointsProvider>
+            <ScrubberProvider
+              width={svgWidth}
+              height={svgHeight}
+              enableScrubbing={enableScrubbing}
+              onScrubberPositionChange={onScrubberPositionChange}
+              style={OVERFLOW_OFFSET}
+              magnetRadius={magnetRadius}
             >
-              <RevealClipDefs
-                drawingArea={contextValue.drawingArea}
-                series={series}
-                animate={animate}
+              <Svg
+                testID='chart-svg'
+                width={svgWidth}
+                height={svgHeight}
+                style={{ overflow: 'visible' }}
               >
-                {children}
-              </RevealClipDefs>
-            </Svg>
-          </ScrubberProvider>
+                <RevealClipDefs
+                  drawingArea={contextValue.drawingArea}
+                  series={series}
+                  animate={animate}
+                >
+                  {children}
+                </RevealClipDefs>
+              </Svg>
+            </ScrubberProvider>
+          </MagneticPointsProvider>
         </CartesianChartProvider>
       )}
     </View>

package/src/lib/Components/CartesianChart/context/useBuildChartContext.test.ts

@@ -221,4 +221,60 @@ describe('useBuildChartContext', () => {
     expect(result.current.drawingArea.width).toBe(400 - 40);
     expect(result.current.drawingArea.height).toBe(200 - 28);
   });
+
+  describe('nice domain prop', () => {
+    // Series of length 3770 → auto X domain is [0, 3769]; `.nice()` rounds it
+    // outward to [0, 4000] (the trailing "dead zone" keeps overlays that sit
+    // outside the data range — e.g. reference lines — from being clipped).
+    const longSeries = makeSeries(Array.from({ length: 3770 }, (_, i) => i));
+
+    it('rounds the X domain by default (.nice())', () => {
+      const { result } = renderHook(() =>
+        useBuildChartContext(hookParams({ series: [longSeries] })),
+      );
+      expect(result.current.getXScale()!.domain()).toEqual([0, 4000]);
+    });
+
+    it('rounds the Y domain by default (.nice())', () => {
+      const { result } = renderHook(() =>
+        useBuildChartContext(
+          hookParams({
+            yAxis: {
+              domain: (bounds: { min: number; max: number }) => ({
+                min: bounds.min - 5,
+                max: bounds.max + 5,
+              }),
+            },
+          }),
+        ),
+      );
+      expect(result.current.getYScale()!.domain()).toEqual([0, 40]);
+    });
+
+    it('opts the X axis out of .nice() when nice is false', () => {
+      const { result } = renderHook(() =>
+        useBuildChartContext(
+          hookParams({ series: [longSeries], xAxis: { nice: false } }),
+        ),
+      );
+      expect(result.current.getXScale()!.domain()).toEqual([0, 3769]);
+    });
+
+    it('opts the Y axis out of .nice() when nice is false', () => {
+      const { result } = renderHook(() =>
+        useBuildChartContext(
+          hookParams({
+            yAxis: {
+              nice: false,
+              domain: (bounds: { min: number; max: number }) => ({
+                min: bounds.min - 5,
+                max: bounds.max + 5,
+              }),
+            },
+          }),
+        ),
+      );
+      expect(result.current.getYScale()!.domain()).toEqual([5, 35]);
+    });
+  });
 });

package/src/lib/Components/CartesianChart/context/useBuildChartContext.ts

@@ -11,19 +11,18 @@ import {
   isBandScaleType,
 } from '../../../utils/scales/scales';
 import type {
-  AxisBounds,
-  AxisConfigProps,
   CartesianChartContextValue,
   ChartInset,
   ChartScaleFunction,
   DrawingArea,
   Series,
 } from '../../../utils/types';
+import type { AxisBounds, BaseAxisProps } from '../../Axis';
 
 type UseBuildChartContextParams = {
   series: Series[];
-  xAxis?: Partial<AxisConfigProps>;
-  yAxis?: Partial<AxisConfigProps>;
+  xAxis?: Partial<BaseAxisProps>;
+  yAxis?: Partial<BaseAxisProps>;
   width: number;
   height: number;
   inset: ChartInset;
@@ -45,11 +44,12 @@ export const computeAxisRange = (
 export const buildScale = (
   domain: AxisBounds,
   range: AxisRange,
-  scaleType: AxisConfigProps['scaleType'] = 'linear',
+  scaleType: BaseAxisProps['scaleType'] = 'linear',
+  nice?: boolean,
 ): ChartScaleFunction =>
   isBandScaleType(scaleType)
     ? getCategoricalScale({ domain, range })
-    : getNumericScale({ scaleType, domain, range });
+    : getNumericScale({ scaleType, domain, range, nice });
 
 export const computeDrawingArea = (
   width: number,
@@ -94,8 +94,8 @@ export const useBuildChartContext = ({
     if (drawingArea.width > 0 && drawingArea.height > 0) {
       const xDomain = computeXDomain(series, xAxis);
       const yDomain = computeYDomain(series, yAxis);
-      xScale = buildScale(xDomain, xRange, xAxis?.scaleType);
-      yScale = buildScale(yDomain, yRange, yAxis?.scaleType);
+      xScale = buildScale(xDomain, xRange, xAxis?.scaleType, xAxis?.nice);
+      yScale = buildScale(yDomain, yRange, yAxis?.scaleType, yAxis?.nice);
     }
 
     const dataLength = computeDataLength(series, xAxis);

package/src/lib/Components/CartesianChart/types.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 
-import type { AxisConfigProps, ChartInset, Series } from '../../utils/types';
+import type { ChartInset, Series } from '../../utils/types';
+import type { BaseAxisProps } from '../Axis';
 
 export type CartesianChartProps = {
   /**
@@ -10,11 +11,11 @@ export type CartesianChartProps = {
   /**
    * Scale and domain configuration for the x-axis.
    */
-  xAxis?: Partial<AxisConfigProps>;
+  xAxis?: Partial<BaseAxisProps>;
   /**
    * Scale and domain configuration for the y-axis.
    */
-  yAxis?: Partial<AxisConfigProps>;
+  yAxis?: Partial<BaseAxisProps>;
   /**
    * Width of the chart in pixels.
    * When omitted, the component auto-measures via `onLayout`.
@@ -63,4 +64,11 @@ export type CartesianChartProps = {
    * @default true
    */
   animate?: boolean;
+  /**
+   * Pixel radius within which the scrubber magnetically snaps to registered
+   * magnetic `<Point>` components. Requires `enableScrubbing` to be `true`.
+   * Set to `0` to disable magnetisation.
+   * @default 6
+   */
+  magnetRadius?: number;
 };

package/src/lib/Components/CartesianChart/utils.ts

@@ -4,9 +4,11 @@ import type { CartesianChartProps } from './types';
 export const DEFAULT_HEIGHT = 160;
 
 /**
- * Internal buffer that prevents SVG content (labels, points, ticks) from being
- * clipped at the edge of the container. Compensated by negative margins on the
- * wrapper so the chart's visual footprint stays unchanged.
+ * Internal buffer added around the drawing area so SVG content (labels, points,
+ * ticks) drawn at the edges is not clipped. The SVG canvas is enlarged by this
+ * buffer on every side and shifted back by {@link OVERFLOW_OFFSET} so
+ * the chart's layout footprint (and the drawing area) stays exactly the
+ * consumer-provided width/height.
  */
 export const OVERFLOW_BUFFER: ChartInset = {
   top: 50,
@@ -14,11 +16,19 @@ export const OVERFLOW_BUFFER: ChartInset = {
   bottom: 50,
   left: 50,
 };
-export const OVERFLOW_NEGATIVE_MARGIN = {
-  marginTop: -OVERFLOW_BUFFER.top,
-  marginRight: -OVERFLOW_BUFFER.right,
-  marginBottom: -OVERFLOW_BUFFER.bottom,
-  marginLeft: -OVERFLOW_BUFFER.left,
+/**
+ * Top/left offset applied to the (enlarged) SVG group so its drawing area aligns
+ * with the container's top-left. The extra width/height added to the SVG
+ * overflows symmetrically on every side via `overflow: visible`.
+ *
+ * Uses `position: relative` to keep parity with the web implementation, where a
+ * negative `margin-top` would collapse through the container instead of
+ * offsetting the SVG inside it.
+ */
+export const OVERFLOW_OFFSET = {
+  position: 'relative' as const,
+  top: -OVERFLOW_BUFFER.top,
+  left: -OVERFLOW_BUFFER.left,
 };
 export const ZERO_PADDING: ChartInset = {
   top: 0,

package/src/lib/Components/Line/utils.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from '@jest/globals';
+
+import {
+  getCategoricalScale,
+  getNumericScale,
+} from '../../utils/scales/scales';
+
+import { toScaledPoints } from './utils';
+
+const xScale = getNumericScale({
+  scaleType: 'linear',
+  domain: { min: 0, max: 7 },
+  range: { min: 0, max: 800 },
+  nice: false,
+});
+
+const yScale = getNumericScale({
+  scaleType: 'linear',
+  domain: { min: 0, max: 100 },
+  range: { min: 200, max: 0 },
+});
+
+describe('toScaledPoints', () => {
+  it('uses index as x input when no xData is provided', () => {
+    const data = [10, 50, 90];
+    const points = toScaledPoints(data, xScale, yScale);
+
+    expect(points).not.toBeNull();
+    expect(points).toHaveLength(3);
+    expect(points![0][0]).toBe(0);
+    expect(points![1][0]).toBeCloseTo(800 / 7);
+    expect(points![2][0]).toBeCloseTo((800 / 7) * 2);
+  });
+
+  it('caps iteration to xData.length when series is longer', () => {
+    const data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+    const xData = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'];
+
+    const points = toScaledPoints(data, xScale, yScale, xData);
+
+    expect(points).not.toBeNull();
+    expect(points).toHaveLength(xData.length);
+    expect(points![0][0]).toBe(0);
+    expect(points![points!.length - 1][0]).toBe(800);
+  });
+
+  it('skips null values without affecting the cap', () => {
+    const data: (number | null)[] = [10, null, 30, 40, 50, 60, 70, 80, 90];
+    const xData = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
+
+    const points = toScaledPoints(data, xScale, yScale, xData);
+
+    expect(points).not.toBeNull();
+    expect(points).toHaveLength(7);
+    expect(points![points!.length - 1][0]).toBe((800 / 7) * 7);
+  });
+
+  it('uses numeric xData values as the x input', () => {
+    const data = [10, 20, 30];
+    const customX = [0, 3.5, 7];
+
+    const points = toScaledPoints(data, xScale, yScale, customX);
+
+    expect(points![0][0]).toBe(0);
+    expect(points![1][0]).toBeCloseTo(400);
+    expect(points![2][0]).toBe(800);
+  });
+
+  it('centers points within categorical band scales', () => {
+    const bandScale = getCategoricalScale({
+      domain: { min: 0, max: 2 },
+      range: { min: 0, max: 300 },
+      padding: 0,
+    });
+    const data = [10, 50, 90];
+
+    const points = toScaledPoints(data, bandScale, yScale);
+
+    expect(points).toHaveLength(3);
+    const bandwidth = bandScale.bandwidth();
+    expect(points![0][0]).toBe((bandScale(0) ?? 0) + bandwidth / 2);
+  });
+
+  it('returns null when fewer than 2 valid points remain', () => {
+    const data: (number | null)[] = [10, null, null];
+    const xData = ['A', 'B', 'C'];
+
+    expect(toScaledPoints(data, xScale, yScale, xData)).toBeNull();
+  });
+});

package/src/lib/Components/Line/utils.ts

@@ -14,6 +14,10 @@ type Point = [x: number, y: number];
  *
  * When `xData` contains numeric values, those values are fed into the scale
  * instead of the array index so the points honour a numeric X domain.
+ *
+ * When `xData` is provided, iteration is capped at `xData.length` so a series
+ * with more points than the axis has labels does not overflow past the right
+ * edge of the chart. The axis is treated as authoritative for the X domain.
  */
 export const toScaledPoints = (
   data: (number | null)[],
@@ -22,8 +26,9 @@ export const toScaledPoints = (
   xData?: readonly (string | number)[],
 ): Point[] | null => {
   const pts: Point[] = [];
+  const limit = xData ? Math.min(data.length, xData.length) : data.length;
 
-  for (let i = 0; i < data.length; i++) {
+  for (let i = 0; i < limit; i++) {
     const value = data[i];
     if (value === null) continue;
 

package/src/lib/Components/LineChart/LineChart.stories.tsx

@@ -76,6 +76,42 @@ export const WithXAxis: Story = {
   },
 };
 
+export const XAxisExplicitNumericData: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+      data: [0, 2, 4],
+    },
+  },
+};
+
+export const XAxisStringData: Story = {
+  parameters: {
+    layout: 'centered',
+    backgrounds: { default: 'light' },
+  },
+  args: {
+    series: sampleSeries,
+    width: 400,
+    height: 250,
+    showXAxis: true,
+    xAxis: {
+      showLine: true,
+      showGrid: true,
+      data: ['Jan', 'Feb', 'Mar'],
+    },
+  },
+};
+
 export const WithStringLabels: Story = {
   parameters: {
     layout: 'centered',