@coinbase/cds-mobile-visualization 3.4.0-beta.10 → 3.4.0-beta.11

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 3.4.0-beta.11 (1/7/2026 PST)
+
+#### 🐞 Fixes
+
+- Allow customization of axis tick mark and grid line alignment in band scale. [[#291](https://github.com/coinbase/cds/pull/291)]
+
 ## 3.4.0-beta.10 (1/6/2026 PST)
 
 #### 🐞 Fixes

package/dts/chart/axis/Axis.d.ts

@@ -1,49 +1,13 @@
 import type React from 'react';
 import { type LineComponent } from '../line';
 import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
+import { type AxisBandPlacement } from '../utils';
 /**
- * Animation variants for grouped axis tick labels - initial mount
- * Note: Mobile currently doesn't use these variants. Axes render immediately without animation.
- * Web uses similar variants with delay to match path enter animation timing.
+ * Animation transition for axis elements (grid lines, tick marks, tick labels).
+ * Matches web's axisUpdateAnimationTransition timing.
  */
-export declare const axisTickLabelsInitialAnimationVariants: {
-  initial: {
-    opacity: number;
-  };
-  animate: {
-    opacity: number;
-    transition: {
-      duration: number;
-      delay: number;
-    };
-  };
-  exit: {
-    opacity: number;
-    transition: {
-      duration: number;
-    };
-  };
-};
-/**
- * Animation variants for axis elements - updates (used for both grid lines and tick labels)
- */
-export declare const axisUpdateAnimationVariants: {
-  initial: {
-    opacity: number;
-  };
-  animate: {
-    opacity: number;
-    transition: {
-      duration: number;
-      delay: number;
-    };
-  };
-  exit: {
-    opacity: number;
-    transition: {
-      duration: number;
-    };
-  };
+export declare const axisUpdateAnimationTransition: {
+  duration: number;
 };
 export type AxisTickLabelComponentProps = Pick<
   ChartTextProps,
@@ -64,6 +28,20 @@ export type AxisTickLabelComponentProps = Pick<
 >;
 export type AxisTickLabelComponent = React.FC<AxisTickLabelComponentProps>;
 export type AxisBaseProps = {
+  /**
+   * Placement of grid lines relative to each band.
+   * Options: 'start', 'middle', 'end', 'edges'
+   * @note This property only applies to band scales.
+   * @default 'edges'
+   */
+  bandGridLinePlacement?: AxisBandPlacement;
+  /**
+   * Placement of tick marks relative to each band.
+   * Options: 'start', 'middle', 'end', 'edges'
+   * @note This property only applies to band scales.
+   * @default 'middle'
+   */
+  bandTickMarkPlacement?: AxisBandPlacement;
   /**
    * Label text to display for the axis.
    */

package/dts/chart/axis/Axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE3E;;;;GAIG;AACH,eAAO,MAAM,sCAAsC;;;;;;;;;;;;;;;;;CAiBlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;CAiBvC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,GACX,OAAO,GACP,qBAAqB,GACrB,mBAAmB,GACnB,SAAS,CACZ,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAChD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,aAAa,CAAC;IACtC;;;;;;;;;;;;;OAaG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,iBAAiB,CAAC;IAC1D;;;;;;;;;;OAUG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;CAC7C,CAAC"}
+{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAmC,KAAK,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEnF;;;GAGG;AACH,eAAO,MAAM,6BAA6B;;CAEzC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAC5C,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,IAAI,GACJ,IAAI,GACJ,MAAM,GACN,cAAc,GACd,UAAU,GACV,YAAY,GACZ,WAAW,GACX,OAAO,GACP,qBAAqB,GACrB,mBAAmB,GACnB,SAAS,CACZ,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAE3E,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;;;;OAKG;IACH,qBAAqB,CAAC,EAAE,iBAAiB,CAAC;IAC1C;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;;;;;;;;;OAgBG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IAChD;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,aAAa,CAAC;IAClC;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,aAAa,CAAC;IACtC;;;;;;;;;;;;;OAaG;IACH,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,iBAAiB,CAAC;IAC1D;;;;;;;;;;OAUG;IACH,kBAAkB,CAAC,EAAE,sBAAsB,CAAC;CAC7C,CAAC"}

package/dts/chart/axis/XAxis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDA+NjB,CAAC"}
+{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDA8RjB,CAAC"}

package/dts/chart/axis/YAxis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDA0NjB,CAAC"}
+{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../src/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;AAEpD,eAAO,MAAM,KAAK,kDAuRjB,CAAC"}

package/dts/chart/line/Line.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type AnimatedProp } from '@shopify/react-native-skia';
 import { type AreaComponent } from '../area/Area';
+import { type PathProps } from '../Path';
 import { type PointBaseProps, type PointProps } from '../point';
 import { type ChartPathCurveType, type GradientDefinition, type Transition } from '../utils';
 export type LineBaseProps = {
@@ -99,17 +100,18 @@ export type LineProps = LineBaseProps & {
 export type LineComponentProps = Pick<
   LineProps,
   'stroke' | 'strokeOpacity' | 'strokeWidth' | 'gradient' | 'animate' | 'transition'
-> & {
-  /**
-   * Path of the line
-   */
-  d: AnimatedProp<string | undefined>;
-  /**
-   * ID of the y-axis to use.
-   * If not provided, defaults to the default y-axis.
-   */
-  yAxisId?: string;
-};
+> &
+  Pick<PathProps, 'clipPath' | 'strokeCap'> & {
+    /**
+     * Path of the line
+     */
+    d: AnimatedProp<string | undefined>;
+    /**
+     * ID of the y-axis to use.
+     * If not provided, defaults to the default y-axis.
+     */
+    yAxisId?: string;
+  };
 export type LineComponent = React.FC<LineComponentProps>;
 export declare const Line: React.NamedExoticComponent<LineProps>;
 //# sourceMappingURL=Line.d.ts.map

package/dts/chart/line/Line.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/chart/line/Line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAGL,KAAK,kBAAkB,EAGvB,KAAK,kBAAkB,EACvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AAOlB,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EACH,OAAO,GACP,CAAC,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACT,QAAQ,GAAG,eAAe,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CACnF,GAAG;IACF;;OAEG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCAyMhB,CAAC"}
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/chart/line/Line.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,4BAA4B,CAAC;AAEtE,OAAO,EAAQ,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAExD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAGL,KAAK,kBAAkB,EAGvB,KAAK,kBAAkB,EACvB,KAAK,UAAU,EAChB,MAAM,UAAU,CAAC;AAOlB,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;;;OAQG;IACH,MAAM,CAAC,EACH,OAAO,GACP,CAAC,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC;IACrF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG;IACtC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,SAAS,EACT,QAAQ,GAAG,eAAe,GAAG,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CACnF,GACC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC1C;;OAEG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEJ,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;AAEzD,eAAO,MAAM,IAAI,uCAyMhB,CAAC"}

package/dts/chart/utils/axis.d.ts

@@ -1,9 +1,27 @@
 import type React from 'react';
 import type { Rect } from '@coinbase/cds-common/types';
 import { type AxisBounds, type Series } from './chart';
-import { type ChartAxisScaleType, type ChartScaleFunction } from './scale';
+import { type ChartAxisScaleType, type ChartScaleFunction, type PointAnchor } from './scale';
 export declare const defaultAxisId = 'DEFAULT_AXIS_ID';
 export declare const defaultAxisScaleType = 'linear';
+/**
+ * Position options for band scale axis elements (grid lines, tick marks, labels).
+ *
+ * - `'start'` - At the start of each step (before bar padding)
+ * - `'middle'` - At the center of each band
+ * - `'end'` - At the end of each step (after bar padding)
+ * - `'edges'` - At start of each tick, plus end for the last tick (encloses the chart)
+ *
+ * @note These properties only apply when using a band scale (`scaleType: 'band'`).
+ */
+export type AxisBandPlacement = 'start' | 'middle' | 'end' | 'edges';
+/**
+ * Converts an AxisBandPlacement to the corresponding PointAnchor for use with getPointOnScale.
+ *
+ * @param placement - The axis placement value
+ * @returns The corresponding PointAnchor for scale calculations
+ */
+export declare const toPointAnchor: (placement: AxisBandPlacement) => PointAnchor;
 /**
  * Axis configuration with computed bounds
  */
@@ -154,6 +172,12 @@ type TickGenerationOptions = {
    * @default 4
    */
   minTickCount?: number;
+  /**
+   * Anchor position for band/categorical scales.
+   * Controls where tick labels are positioned within each band.
+   * @default 'middle'
+   */
+  anchor?: PointAnchor;
 };
 export type GetAxisTicksDataProps = {
   /**

package/dts/chart/utils/axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/axis.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/axis.ts"],"names":[],"mappings":"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"}

package/dts/chart/utils/point.d.ts

@@ -1,5 +1,5 @@
 import type { TextHorizontalAlignment, TextVerticalAlignment } from '../text';
-import { type ChartScaleFunction, type SerializableScale } from './scale';
+import { type ChartScaleFunction, type PointAnchor, type SerializableScale } from './scale';
 /**
  * Position a label should be placed relative to the point
  *
@@ -10,24 +10,29 @@ import { type ChartScaleFunction, type SerializableScale } from './scale';
 export type PointLabelPosition = 'top' | 'bottom' | 'left' | 'right' | 'center';
 /**
  * Get a point from a data value and a scale.
- * @note for categorical scales, the point will be centered within the band.
- * @note for log scales, zero and negative values are clamped to a small positive value.
- * @param data - the data value.
- * @param scale - the scale function.
- * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ *
+ * @param dataValue - The data value to convert to a pixel position.
+ * @param scale - The scale function.
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
  */
-export declare const getPointOnScale: (dataValue: number, scale: ChartScaleFunction) => number;
+export declare const getPointOnScale: (
+  dataValue: number,
+  scale: ChartScaleFunction,
+  anchor?: PointAnchor,
+) => number;
 /**
  * Get a point from a data value and a serializable scale (worklet-compatible).
- * @note for categorical scales, the point will be centered within the band.
- * @note for log scales, zero and negative values are clamped to a small positive value.
- * @param dataValue - the data value.
- * @param scale - the serializable scale object.
- * @returns the pixel value (defaulting to 0 if data value is not defined in scale).
+ *
+ * @param dataValue - The data value to convert to a pixel position.
+ * @param scale - The serializable scale function.
+ * @param anchor (@default 'middle') - For band scales, where to anchor the point within the band.
+ * @returns The pixel value (@default 0 if data value is not defined in scale).
  */
 export declare function getPointOnSerializableScale(
   dataValue: number,
   scale: SerializableScale,
+  anchor?: PointAnchor,
 ): number;
 /**
  * Projects a single data point to pixel coordinates using serializable scales.

package/dts/chart/utils/point.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAEL,KAAK,kBAAkB,EAIvB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAAI,WAAW,MAAM,EAAE,OAAO,kBAAkB,KAAG,MAc9E,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAc/F;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAAC,EAChD,CAAC,EACD,CAAC,EACD,MAAM,EACN,MAAM,GACP,EAAE;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,iBAAiB,CAAC;CAC3B,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM3B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,yCAM3B;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,kBAAkB,KAC3B;IAAE,mBAAmB,EAAE,uBAAuB,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,CAAA;CAyB1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,UAAU,kBAAkB,EAC5B,QAAQ,MAAM,KACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CA0BxB,CAAC"}
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/point.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAE9E,OAAO,EAIL,KAAK,kBAAkB,EAIvB,KAAK,WAAW,EAEhB,KAAK,iBAAiB,EACvB,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEhF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,WAAW,MAAM,EACjB,OAAO,kBAAkB,EACzB,SAAQ,WAAsB,KAC7B,MAgCF,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CACzC,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,iBAAiB,EACxB,MAAM,GAAE,WAAsB,GAC7B,MAAM,CAuCR;AAED;;;GAGG;AACH,wBAAgB,iCAAiC,CAAC,EAChD,CAAC,EACD,CAAC,EACD,MAAM,EACN,MAAM,GACP,EAAE;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,iBAAiB,CAAC;IAC1B,MAAM,EAAE,iBAAiB,CAAC;CAC3B,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAM3B;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY,GAAI,2BAK1B;IACD,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAEzB,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,GAAI,yCAM3B;IACD,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,EAAE,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,MAAM,EAAE,kBAAkB,CAAC;CAC5B,KAAG,KAAK,CAAC;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAqDxC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,UAAU,kBAAkB,KAC3B;IAAE,mBAAmB,EAAE,uBAAuB,CAAC;IAAC,iBAAiB,EAAE,qBAAqB,CAAA;CAyB1F,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,GAAG,MAAM,EACT,GAAG,MAAM,EACT,UAAU,kBAAkB,EAC5B,QAAQ,MAAM,KACb;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CA0BxB,CAAC"}

package/dts/chart/utils/scale.d.ts

@@ -47,6 +47,17 @@ export declare const getCategoricalScale: ({
   range: AxisBounds;
   padding?: number;
 }) => CategoricalScale;
+/**
+ * Anchor position for points on a scale. Currently used only for band scales.
+ *
+ * For band scales, this determines where within the band to position a point:
+ * - `'stepStart'` - At the start of the step
+ * - `'bandStart'` - At the start of the band
+ * - `'middle'` - At the center of the band
+ * - `'bandEnd'` - At the end of the band
+ * - `'stepEnd'` - At the end of the step
+ */
+export type PointAnchor = 'stepStart' | 'bandStart' | 'middle' | 'bandEnd' | 'stepEnd';
 /**
  * Convert a D3 scale to a serializable scale configuration that can be used in worklets
  */

package/dts/chart/utils/scale.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scale.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../src/chart/utils/scale.ts"],"names":[],"mappings":"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"}

package/esm/chart/axis/Axis.js

@@ -1,45 +1,9 @@
-/**
- * Animation variants for grouped axis tick labels - initial mount
- * Note: Mobile currently doesn't use these variants. Axes render immediately without animation.
- * Web uses similar variants with delay to match path enter animation timing.
- */
-export const axisTickLabelsInitialAnimationVariants = {
-  initial: {
-    opacity: 0
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      duration: 0,
-      delay: 0
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.15
-    }
-  }
-};
+import { accessoryFadeTransitionDuration } from '../utils';
 
 /**
- * Animation variants for axis elements - updates (used for both grid lines and tick labels)
+ * Animation transition for axis elements (grid lines, tick marks, tick labels).
+ * Matches web's axisUpdateAnimationTransition timing.
  */
-export const axisUpdateAnimationVariants = {
-  initial: {
-    opacity: 0
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      duration: 0.15,
-      delay: 0.15 // For updates: fade out 150ms, then fade in 150ms
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.15
-    }
-  }
+export const axisUpdateAnimationTransition = {
+  duration: accessoryFadeTransitionDuration
 };

package/esm/chart/axis/XAxis.js

@@ -1,15 +1,14 @@
-const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height"];
+const _excluded = ["position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement"];
 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, useCallback, useEffect, useId, useMemo } from 'react';
 import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
 import { Group } from '@shopify/react-native-skia';
 import { useCartesianChartContext } from '../ChartProvider';
 import { DottedLine } from '../line/DottedLine';
-import { ReferenceLine } from '../line/ReferenceLine';
 import { SolidLine } from '../line/SolidLine';
 import { ChartText } from '../text/ChartText';
 import { ChartTextGroup } from '../text/ChartTextGroup';
-import { getAxisTicksData, isCategoricalScale, lineToPath } from '../utils';
+import { getAxisTicksData, getPointOnScale, isCategoricalScale, lineToPath, toPointAnchor } from '../utils';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_HEIGHT = 32;
@@ -35,13 +34,16 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       tickMaxStep,
       label,
       labelGap = 4,
-      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT
+      height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
+      bandGridLinePlacement = 'edges',
+      bandTickMarkPlacement = 'middle'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   const registrationId = useId();
   const {
     animate,
+    drawingArea,
     getXScale,
     getXAxis,
     registerAxis,
@@ -51,10 +53,6 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
   const xScale = getXScale();
   const xAxis = getXAxis();
   const axisBounds = getAxisBounds(registrationId);
-
-  // Note: gridOpacity not currently used in Skia version
-  // const gridOpacity = useSharedValue(1);
-
   useEffect(() => {
     registerAxis(registrationId, position, height);
     return () => unregisterAxis(registrationId);
@@ -112,6 +110,72 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       }
     });
   }, [ticks, xScale, requestedTickCount, tickInterval, tickMinStep, tickMaxStep, xAxis == null ? void 0 : xAxis.data]);
+  const isBandScale = useMemo(() => {
+    if (!xScale) return false;
+    return isCategoricalScale(xScale);
+  }, [xScale]);
+
+  // Compute grid line positions (including bounds closing line for band scales)
+  const gridLinePositions = useMemo(() => {
+    if (!xScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          x: tick.position,
+          key: "grid-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = xScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandGridLinePlacement === 'edges';
+      const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandGridLinePlacement));
+      const positions = [{
+        x: startX,
+        key: "grid-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing line at stepEnd
+      if (isLastTick && isEdges) {
+        const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          x: endX,
+          key: "grid-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, xScale, isBandScale, bandGridLinePlacement]);
+
+  // Compute tick mark positions (including bounds closing tick for band scales)
+  const tickMarkPositions = useMemo(() => {
+    if (!xScale) return [];
+    return ticksData.flatMap((tick, index) => {
+      if (!isBandScale) {
+        return [{
+          x: tick.position,
+          key: "tick-mark-" + tick.tick + "-" + index
+        }];
+      }
+      const bandScale = xScale;
+      const isLastTick = index === ticksData.length - 1;
+      const isEdges = bandTickMarkPlacement === 'edges';
+      const startX = getPointOnScale(tick.tick, bandScale, toPointAnchor(bandTickMarkPlacement));
+      const positions = [{
+        x: startX,
+        key: "tick-mark-" + tick.tick + "-" + index
+      }];
+
+      // For edges on last tick, add the closing tick mark at stepEnd
+      if (isLastTick && isEdges) {
+        const endX = getPointOnScale(tick.tick, bandScale, 'stepEnd');
+        positions.push({
+          x: endX,
+          key: "tick-mark-" + tick.tick + "-" + index + "-end"
+        });
+      }
+      return positions;
+    });
+  }, [ticksData, xScale, isBandScale, bandTickMarkPlacement]);
   const chartTextData = useMemo(() => {
     if (!axisBounds) return null;
     return ticksData.map(tick => {
@@ -121,11 +185,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       // This ensures tick labels are centered in the axis area, not including label space
       const availableSpace = AXIS_HEIGHT - tickOffset;
       const labelOffset = availableSpace / 2;
-
-      // For bottom position: start at axisBounds.y
-      // For top position with label: start at axisBounds.y + LABEL_SIZE
-      const baseY = position === 'top' && label ? axisBounds.y + LABEL_SIZE : axisBounds.y;
-      const labelY = position === 'top' ? baseY + labelOffset - tickOffset : baseY + labelOffset + tickOffset;
+      const labelY = position === 'top' ? axisBounds.y + axisBounds.height - tickOffset - labelOffset : axisBounds.y + labelOffset + tickOffset;
       return {
         x: tick.position,
         y: labelY,
@@ -137,20 +197,33 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
         }
       };
     });
-  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, label]);
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick]);
   if (!xScale || !axisBounds) return;
   const labelX = axisBounds.x + axisBounds.width / 2;
   const labelY = position === 'bottom' ? axisBounds.y + axisBounds.height - LABEL_SIZE / 2 : axisBounds.y + LABEL_SIZE / 2;
+
+  // Pre-compute tick mark Y coordinates
+  const tickYTop = axisBounds.y;
+  const tickYBottom = axisBounds.y + axisBounds.height;
+  const tickYStart = position === 'bottom' ? tickYTop : tickYBottom;
+  const tickYEnd = position === 'bottom' ? tickYTop + tickMarkSize : tickYBottom - tickMarkSize;
+
+  // Note: Unlike web, mobile renders grid lines and tick marks immediately without fade animation.
+  // This is because Skia can measure text dimensions synchronously, so there's no need to hide
+  // elements while waiting for measurements (web uses async ResizeObserver).
   return /*#__PURE__*/_jsxs(Group, {
     children: [showGrid && /*#__PURE__*/_jsx(Group, {
-      children: ticksData.map((tick, index) => {
-        const verticalLine = /*#__PURE__*/_jsx(ReferenceLine, {
-          LineComponent: GridLineComponent,
-          dataX: tick.tick
-        });
-        return /*#__PURE__*/_jsx(Group, {
-          children: verticalLine
-        }, "grid-" + tick.tick + "-" + index);
+      children: gridLinePositions.map(_ref2 => {
+        let {
+          x,
+          key
+        } = _ref2;
+        return /*#__PURE__*/_jsx(GridLineComponent, {
+          animate: false,
+          clipPath: null,
+          d: lineToPath(x, drawingArea.y, x, drawingArea.y + drawingArea.height),
+          stroke: theme.color.bgLine
+        }, key);
       })
     }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
       prioritizeEndLabels: true,
@@ -158,17 +231,19 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       labels: chartTextData,
       minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
-      children: ticksData.map((tick, index) => {
-        const tickY = position === 'bottom' ? axisBounds.y : axisBounds.y + axisBounds.height;
-        const tickY2 = position === 'bottom' ? axisBounds.y + tickMarkSize : axisBounds.y + axisBounds.height - tickMarkSize;
+      children: tickMarkPositions.map(_ref3 => {
+        let {
+          x,
+          key
+        } = _ref3;
         return /*#__PURE__*/_jsx(TickMarkLineComponent, {
           animate: false,
           clipPath: null,
-          d: lineToPath(tick.position, tickY, tick.position, tickY2),
+          d: lineToPath(x, tickYStart, x, tickYEnd),
           stroke: theme.color.fg,
           strokeCap: "square",
           strokeWidth: 1
-        }, "tick-mark-" + tick.tick + "-" + index);
+        }, key);
       })
     }), showLine && /*#__PURE__*/_jsx(LineComponent, {
       animate: false,