@coinbase/cds-mobile 9.13.0 → 9.14.0

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.14.0 (8/11/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: support different tick label overflow- #835. [[#835](https://github.com/coinbase/cds/pull/835)]
+
 ## 9.13.0 (8/11/2026 PST)
 
 #### 🚀 Updates

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

@@ -25,8 +25,11 @@ export type AxisTickLabelComponentProps = Pick<
   | 'horizontalAlignment'
   | 'verticalAlignment'
   | 'opacity'
+  | 'repositionAxes'
+  | 'disableRepositioning'
 >;
 export type AxisTickLabelComponent = React.FC<AxisTickLabelComponentProps>;
+export type AxisTickLabelOverflow = 'reposition' | 'fade' | 'visible';
 export type AxisBaseProps = {
   /**
    * Placement of grid lines relative to each band.
@@ -126,6 +129,15 @@ export type AxisBaseProps = {
    * Prevents the step from being larger than this value.
    */
   tickMaxStep?: number;
+  /**
+   * How tick labels behave at the chart edges.
+   * - `reposition` — nudge labels to stay in bounds on both axes.
+   * - `fade` — add a fade effect to the labels at the edges (vertical for y-axis, horizontal for x-axis),
+   *   reposition on opposite axis (horizontal for y-axis, vertical for x-axis).
+   * - `visible` — leave labels at their natural positions with no fading.
+   * @default 'reposition'
+   */
+  tickLabelOverflow?: AxisTickLabelOverflow;
 };
 export type AxisProps = AxisBaseProps & {
   /**

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

@@ -1 +1 @@
-{"version":3,"file":"Axis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD;;;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;;;;;;;;OAQG;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/visualizations/chart/axis/Axis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD;;;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,GACT,gBAAgB,GAChB,sBAAsB,CACzB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAE3E,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtE,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;;;;;;;;OAQG;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;IACrB;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;CAC3C,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/visualizations/chart/axis/AxisTickLabelOverflowMask.d.ts

@@ -0,0 +1,11 @@
+import { type PropsWithChildren } from 'react';
+import type { SharedProps } from '@coinbase/cds-common/types/SharedProps';
+export type AxisTickLabelOverflowMaskProps = SharedProps &
+  PropsWithChildren<{
+    /**
+     * Fade along the chart edges for this axis (`x`: left/right, `y`: top/bottom).
+     */
+    axis: 'x' | 'y';
+  }>;
+export declare const AxisTickLabelOverflowMask: import('react').NamedExoticComponent<AxisTickLabelOverflowMaskProps>;
+//# sourceMappingURL=AxisTickLabelOverflowMask.d.ts.map

package/dts/visualizations/chart/axis/AxisTickLabelOverflowMask.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AxisTickLabelOverflowMask.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/AxisTickLabelOverflowMask.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wCAAwC,CAAC;AAS1E,MAAM,MAAM,8BAA8B,GAAG,WAAW,GACtD,iBAAiB,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;CACjB,CAAC,CAAC;AAEL,eAAO,MAAM,yBAAyB,sEAiCrC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;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,kDA6RjB,CAAC"}
+{"version":3,"file":"XAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/XAxis.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAO5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;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,kDAmTjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAM5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;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,kDA2RjB,CAAC"}
+{"version":3,"file":"YAxis.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/YAxis.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAO5D,MAAM,MAAM,cAAc,GAAG,aAAa,GAAG;IAC3C;;;;OAIG;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,kDA4SjB,CAAC"}

package/dts/visualizations/chart/axis/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Axis';
+export * from './AxisTickLabelOverflowMask';
 export * from './DefaultAxisTickLabel';
 export * from './XAxis';
 export * from './YAxis';

package/dts/visualizations/chart/axis/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/axis/index.ts"],"names":[],"mappings":"AACA,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dts/visualizations/chart/line/ReferenceLine.d.ts

@@ -17,6 +17,7 @@ export type ReferenceLineLabelComponentProps = Pick<
   | 'background'
   | 'borderRadius'
   | 'disableRepositioning'
+  | 'repositionAxes'
   | 'horizontalAlignment'
   | 'verticalAlignment'
   | 'font'

package/dts/visualizations/chart/line/ReferenceLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReferenceLine.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/line/ReferenceLine.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI/D,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,MAAM,gCAAgC,GAAG,IAAI,CACjD,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,OAAO,GACP,OAAO,GACP,YAAY,GACZ,cAAc,GACd,sBAAsB,GACtB,qBAAqB,GACrB,mBAAmB,GACnB,MAAM,GACN,YAAY,GACZ,cAAc,GACd,SAAS,GACT,IAAI,GACJ,IAAI,GACJ,UAAU,GACV,oBAAoB,CACvB,GAAG;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC;AAErF,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,wBAAwB,CAAC,EAAE,uBAAuB,CAAC;IACnD;;OAEG;IACH,sBAAsB,CAAC,EAAE,qBAAqB,CAAC;IAC/C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,KAAK,4BAA4B,GAAG,sBAAsB,GAAG;IAC3D;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,4BAA4B,GAAG,0BAA0B,CAAC;AAE3F,eAAO,MAAM,aAAa,0DAoJzB,CAAC"}
+{"version":3,"file":"ReferenceLine.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/line/ReferenceLine.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAI/D,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,uBAAuB,EACvB,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAMjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,MAAM,gCAAgC,GAAG,IAAI,CACjD,cAAc,EACZ,GAAG,GACH,GAAG,GACH,UAAU,GACV,OAAO,GACP,OAAO,GACP,YAAY,GACZ,cAAc,GACd,sBAAsB,GACtB,gBAAgB,GAChB,qBAAqB,GACrB,mBAAmB,GACnB,MAAM,GACN,YAAY,GACZ,cAAc,GACd,SAAS,GACT,IAAI,GACJ,IAAI,GACJ,UAAU,GACV,oBAAoB,CACvB,GAAG;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAAC,CAAC;AAErF,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,2BAA2B,CAAC;IAC7C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,wBAAwB,CAAC,EAAE,uBAAuB,CAAC;IACnD;;OAEG;IACH,sBAAsB,CAAC,EAAE,qBAAqB,CAAC;IAC/C;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,KAAK,4BAA4B,GAAG,sBAAsB,GAAG;IAC3D;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC;AAEF,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,qBAAqB,CAAC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,4BAA4B,GAAG,0BAA0B,CAAC;AAE3F,eAAO,MAAM,aAAa,0DAoJzB,CAAC"}

package/dts/visualizations/chart/text/ChartText.d.ts

@@ -21,6 +21,11 @@ export type TextHorizontalAlignment = 'left' | 'center' | 'right';
  * Vertical alignment options for chart text.
  */
 export type TextVerticalAlignment = 'top' | 'middle' | 'bottom';
+/**
+ * Which axes ChartText may nudge labels along to stay in bounds.
+ * @default 'both'
+ */
+export type ChartTextRepositionAxes = 'x' | 'y' | 'both' | 'none';
 export type ChartTextBaseProps = {
   /**
    * The text color.
@@ -37,7 +42,19 @@ export type ChartTextBaseProps = {
    */
   elevated?: boolean;
   /**
-   * When true, disables automatic repositioning to fit within bounds.
+   * Which axes to reposition labels on when they would overflow bounds.
+   * @default 'both'
+   */
+  repositionAxes?: ChartTextRepositionAxes;
+  /**
+   * Disables automatic repositioning to fit within bounds.
+   *
+   * @note `true` is equivalent to `repositionAxes='none'`, `false`/omit equals `repositionAxes='both'`.
+   *
+   * @deprecated Use `repositionAxes` instead
+   *
+   * This will be removed in a future major release.
+   * @deprecationExpectedRemoval v11
    */
   disableRepositioning?: boolean;
   /**
@@ -88,12 +105,12 @@ export type ChartTextProps = ChartTextBaseProps & {
   children: ChartTextChildren;
   /**
    * The desired x position in pixels.
-   * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
+   * @note Text will be automatically positioned to fit within bounds based on `repositionAxes`.
    */
   x: AnimatedProp<number>;
   /**
    * The desired y position in pixels.
-   * @note Text will be automatically positioned to fit within bounds unless `disableRepositioning` is true.
+   * @note Text will be automatically positioned to fit within bounds based on `repositionAxes`.
    */
   y: AnimatedProp<number>;
   /**

package/dts/visualizations/chart/text/ChartText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EACL,KAAK,YAAY,EAEjB,SAAS,EACT,UAAU,EAOV,KAAK,WAAW,EAEhB,SAAS,EAEV,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAE,KAAK,UAAU,EAAsC,MAAM,gBAAgB,CAAC;AAyBrF;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACxB;;;OAGG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACxB;;;OAGG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC,uBAAuB,CAAC,CAAC;IAC5D;;;OAGG;IACH,iBAAiB,CAAC,EAAE,YAAY,CAAC,qBAAqB,CAAC,CAAC;IACxD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,SAAS,sDA0TrB,CAAC"}
+{"version":3,"file":"ChartText.d.ts","sourceRoot":"","sources":["../../../../src/visualizations/chart/text/ChartText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EACL,KAAK,YAAY,EAEjB,SAAS,EACT,UAAU,EAOV,KAAK,WAAW,EAEhB,SAAS,EAEV,MAAM,4BAA4B,CAAC;AAKpC,OAAO,EAAE,KAAK,UAAU,EAAsC,MAAM,gBAAgB,CAAC;AAyBrF;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC;AAEnE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEhE;;;GAGG;AACH,MAAM,MAAM,uBAAuB,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,MAAM,CAAC;AAElE,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,uBAAuB,CAAC;IACzC;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;OAGG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC;IACd;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC5B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG;IAChD;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,QAAQ,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACxB;;;OAGG;IACH,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACxB;;;OAGG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,YAAY,CAAC,uBAAuB,CAAC,CAAC;IAC5D;;;OAGG;IACH,iBAAiB,CAAC,EAAE,YAAY,CAAC,qBAAqB,CAAC,CAAC;IACxD;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAC/B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IACtB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF,eAAO,MAAM,SAAS,sDA4TrB,CAAC"}

package/esm/visualizations/chart/axis/AxisTickLabelOverflowMask.js

@@ -0,0 +1,44 @@
+import { memo, useMemo } from 'react';
+import { Group, LinearGradient, Rect, vec } from '@shopify/react-native-skia';
+import { useCartesianChartContext } from '../ChartProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const axisTickLabelOverflowFadeWidth = 30;
+const maskOpaque = 'rgba(255, 255, 255, 1)';
+const maskClear = 'rgba(255, 255, 255, 0)';
+export const AxisTickLabelOverflowMask = /*#__PURE__*/memo(_ref => {
+  let {
+    axis,
+    children
+  } = _ref;
+  const {
+    width: chartWidth,
+    height: chartHeight
+  } = useCartesianChartContext();
+  const fadeWidth = axisTickLabelOverflowFadeWidth;
+  const isXAxis = axis === 'x';
+  const fadeX = Math.min(fadeWidth, chartWidth / 2) / Math.max(chartWidth, 1);
+  const fadeY = Math.min(fadeWidth, chartHeight / 2) / Math.max(chartHeight, 1);
+  const colors = useMemo(() => [maskClear, maskOpaque, maskOpaque, maskClear], []);
+  const positions = useMemo(() => isXAxis ? [0, fadeX, 1 - fadeX, 1] : [0, fadeY, 1 - fadeY, 1], [fadeX, fadeY, isXAxis]);
+  if (chartWidth <= 0 || chartHeight <= 0) {
+    return /*#__PURE__*/_jsx(Group, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs(Group, {
+    layer: true,
+    children: [children, /*#__PURE__*/_jsx(Rect, {
+      blendMode: "dstIn",
+      height: chartHeight,
+      width: chartWidth,
+      x: 0,
+      y: 0,
+      children: /*#__PURE__*/_jsx(LinearGradient, {
+        colors: colors,
+        end: isXAxis ? vec(chartWidth, 0) : vec(0, chartHeight),
+        positions: positions,
+        start: vec(0, 0)
+      })
+    })]
+  });
+});

package/esm/visualizations/chart/axis/XAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "tickMinStep", "tickMaxStep", "label", "labelGap", "height", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
 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 { Group } from '@shopify/react-native-skia';
@@ -12,6 +12,7 @@ import { getAxisTicksData, toPointAnchor } from '../utils/axis';
 import { lineToPath } from '../utils/path';
 import { getPointOnScale } from '../utils/point';
 import { isCategoricalScale } from '../utils/scale';
+import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_HEIGHT = 32;
@@ -40,7 +41,8 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       labelGap = 4,
       height = label ? AXIS_HEIGHT + LABEL_SIZE : AXIS_HEIGHT,
       bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
+      bandTickMarkPlacement = 'middle',
+      tickLabelOverflow = 'reposition'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -55,6 +57,7 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
     unregisterAxis,
     getAxisBounds
   } = useCartesianChartContext();
+  const fadeTickLabels = tickLabelOverflow === 'fade';
   const xScale = getXScale(axisId);
   const xAxis = getXAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
@@ -189,11 +192,12 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
         chartTextProps: {
           color: theme.color.fgMuted,
           verticalAlignment: 'middle',
-          horizontalAlignment: 'center'
+          horizontalAlignment: 'center',
+          repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'y' : 'both'
         }
       };
     });
-  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick]);
+  }, [axisBounds, ticksData, theme.color.fgMuted, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, fadeTickLabels, tickLabelOverflow]);
   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;
@@ -221,11 +225,6 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
           stroke: theme.color.bgLine
         }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
-      prioritizeEndLabels: true,
-      LabelComponent: TickLabelComponent,
-      labels: chartTextData,
-      minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
       children: tickMarkPositions.map(_ref3 => {
         let {
@@ -248,8 +247,22 @@ export const XAxis = /*#__PURE__*/memo(_ref => {
       stroke: theme.color.fg,
       strokeCap: "square",
       strokeWidth: 1
-    }), label && /*#__PURE__*/_jsx(ChartText, {
+    }), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
+      axis: "x",
+      children: /*#__PURE__*/_jsx(ChartTextGroup, {
+        prioritizeEndLabels: true,
+        LabelComponent: TickLabelComponent,
+        labels: chartTextData,
+        minGap: minTickLabelGap
+      })
+    }) : /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    })), label && /*#__PURE__*/_jsx(ChartText, {
       horizontalAlignment: "center",
+      repositionAxes: "none",
       verticalAlignment: "middle",
       x: labelX,
       y: labelY,

package/esm/visualizations/chart/axis/YAxis.js

@@ -1,4 +1,4 @@
-const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement"];
+const _excluded = ["axisId", "position", "showGrid", "requestedTickCount", "ticks", "tickLabelFormatter", "TickLabelComponent", "GridLineComponent", "LineComponent", "TickMarkLineComponent", "tickMarkLabelGap", "minTickLabelGap", "showTickMarks", "showLine", "tickMarkSize", "tickInterval", "label", "labelGap", "width", "bandGridLinePlacement", "bandTickMarkPlacement", "tickLabelOverflow"];
 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 { Group, vec } from '@shopify/react-native-skia';
@@ -12,6 +12,7 @@ import { getAxisTicksData, toPointAnchor } from '../utils/axis';
 import { lineToPath } from '../utils/path';
 import { getPointOnScale } from '../utils/point';
 import { isCategoricalScale } from '../utils/scale';
+import { AxisTickLabelOverflowMask } from './AxisTickLabelOverflowMask';
 import { DefaultAxisTickLabel } from './DefaultAxisTickLabel';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AXIS_WIDTH = 44;
@@ -38,7 +39,8 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       labelGap = 4,
       width = label ? AXIS_WIDTH + LABEL_SIZE : AXIS_WIDTH,
       bandGridLinePlacement = 'edges',
-      bandTickMarkPlacement = 'middle'
+      bandTickMarkPlacement = 'middle',
+      tickLabelOverflow = 'reposition'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
@@ -53,6 +55,7 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
     unregisterAxis,
     getAxisBounds
   } = useCartesianChartContext();
+  const fadeTickLabels = tickLabelOverflow === 'fade';
   const yScale = getYScale(axisId);
   const yAxis = getYAxis(axisId);
   const axisBounds = getAxisBounds(registrationId);
@@ -182,11 +185,12 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
         chartTextProps: {
           color: theme.color.fgMuted,
           verticalAlignment: 'middle',
-          horizontalAlignment: position === 'left' ? 'right' : 'left'
+          horizontalAlignment: position === 'left' ? 'right' : 'left',
+          repositionAxes: tickLabelOverflow === 'visible' ? 'none' : fadeTickLabels ? 'x' : 'both'
         }
       };
     });
-  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted]);
+  }, [axisBounds, ticksData, tickMarkLabelGap, showTickMarks, tickMarkSize, position, formatTick, theme.color.fgMuted, fadeTickLabels, tickLabelOverflow]);
   if (!yScale || !axisBounds) return;
   const labelX = position === 'left' ? axisBounds.x + LABEL_SIZE / 2 : axisBounds.x + axisBounds.width - LABEL_SIZE / 2;
   const labelY = axisBounds.y + axisBounds.height / 2;
@@ -214,11 +218,6 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
           stroke: theme.color.bgLine
         }, key);
       })
-    }), chartTextData && /*#__PURE__*/_jsx(ChartTextGroup, {
-      prioritizeEndLabels: true,
-      LabelComponent: TickLabelComponent,
-      labels: chartTextData,
-      minGap: minTickLabelGap
     }), axisBounds && showTickMarks && /*#__PURE__*/_jsx(Group, {
       children: tickMarkPositions.map(_ref3 => {
         let {
@@ -241,13 +240,27 @@ export const YAxis = /*#__PURE__*/memo(_ref => {
       stroke: theme.color.fg,
       strokeCap: "square",
       strokeWidth: 1
-    }), label && /*#__PURE__*/_jsx(Group, {
+    }), chartTextData && (fadeTickLabels ? /*#__PURE__*/_jsx(AxisTickLabelOverflowMask, {
+      axis: "y",
+      children: /*#__PURE__*/_jsx(ChartTextGroup, {
+        prioritizeEndLabels: true,
+        LabelComponent: TickLabelComponent,
+        labels: chartTextData,
+        minGap: minTickLabelGap
+      })
+    }) : /*#__PURE__*/_jsx(ChartTextGroup, {
+      prioritizeEndLabels: true,
+      LabelComponent: TickLabelComponent,
+      labels: chartTextData,
+      minGap: minTickLabelGap
+    })), label && /*#__PURE__*/_jsx(Group, {
       origin: vec(labelX, labelY),
       transform: [{
         rotate: position === 'left' ? -Math.PI / 2 : Math.PI / 2
       }],
       children: /*#__PURE__*/_jsx(ChartText, {
         horizontalAlignment: "center",
+        repositionAxes: "none",
         verticalAlignment: "middle",
         x: labelX,
         y: labelY,

package/esm/visualizations/chart/axis/__stories__/Axis.stories.js

@@ -1,55 +1,58 @@
 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, useCallback, useMemo } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
+import { IconButton } from '../../../../buttons';
 import { Example, ExampleScreen } from '../../../../examples/ExampleScreen';
 import { useTheme } from '../../../../hooks/useTheme';
+import { HStack, VStack } from '../../../../layout';
+import { Text } from '../../../../typography';
 import { BarPlot } from '../../bar';
 import { CartesianChart } from '../../CartesianChart';
 import { LineChart, SolidLine } from '../../line';
 import { Line } from '../../line/Line';
 import { Scrubber } from '../../scrubber/Scrubber';
 import { XAxis, YAxis } from '..';
-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 defaultChartHeight = 250;
 const ThinSolidLine = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SolidLine, _extends({}, props, {
   strokeWidth: 1
 })));
+const data = [{
+  name: 'Page A',
+  uv: 4000,
+  pv: 2400,
+  amt: 2400
+}, {
+  name: 'Page B',
+  uv: 3000,
+  pv: 1398,
+  amt: 2210
+}, {
+  name: 'Page C',
+  uv: 2000,
+  pv: 9800,
+  amt: 2290
+}, {
+  name: 'Page D',
+  uv: 2780,
+  pv: 3908,
+  amt: 2000
+}, {
+  name: 'Page E',
+  uv: 1890,
+  pv: 4800,
+  amt: 2181
+}, {
+  name: 'Page F',
+  uv: 2390,
+  pv: 3800,
+  amt: 2500
+}, {
+  name: 'Page G',
+  uv: 3490,
+  pv: 4300,
+  amt: 2100
+}];
 const Simple = () => {
-  const data = [{
-    name: 'Page A',
-    uv: 4000,
-    pv: 2400,
-    amt: 2400
-  }, {
-    name: 'Page B',
-    uv: 3000,
-    pv: 1398,
-    amt: 2210
-  }, {
-    name: 'Page C',
-    uv: 2000,
-    pv: 9800,
-    amt: 2290
-  }, {
-    name: 'Page D',
-    uv: 2780,
-    pv: 3908,
-    amt: 2000
-  }, {
-    name: 'Page E',
-    uv: 1890,
-    pv: 4800,
-    amt: 2181
-  }, {
-    name: 'Page F',
-    uv: 2390,
-    pv: 3800,
-    amt: 2500
-  }, {
-    name: 'Page G',
-    uv: 3490,
-    pv: 4300,
-    amt: 2100
-  }];
   const pageViews = data.map(d => d.pv);
   const pageNames = data.map(d => d.name);
   const pageUniqueVisitors = data.map(d => d.uv);
@@ -457,80 +460,180 @@ const LineChartOnBandScale = _ref2 => {
     })]
   });
 };
-const AxisStories = () => {
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Basic",
-      children: /*#__PURE__*/_jsx(Simple, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Time of Day",
-      children: /*#__PURE__*/_jsx(TimeOfDayAxesExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Multiple Axes on Same Side",
-      children: /*#__PURE__*/_jsx(MultipleYAxesExample, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Strict Domain Limit",
-      children: /*#__PURE__*/_jsx(DomainLimitType, {
-        limit: "strict"
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Nice Domain Limit",
-      children: /*#__PURE__*/_jsx(DomainLimitType, {
-        limit: "nice"
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Band Axis Grid Alignment",
-      children: /*#__PURE__*/_jsxs(CartesianChart, {
-        height: 350,
-        inset: 8,
-        series: [{
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22]
-        }],
-        xAxis: {
-          scaleType: 'band',
-          data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-        },
-        yAxis: {
-          domain: {
-            min: 0
-          }
-        },
-        children: [/*#__PURE__*/_jsx(XAxis, {
-          showGrid: true,
-          showLine: true,
-          showTickMarks: true,
-          label: "Default"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "start",
-          label: "Start"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "end",
-          label: "End"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "middle",
-          label: "Middle"
-        }), /*#__PURE__*/_jsx(XAxis, {
-          showLine: true,
-          showTickMarks: true,
-          bandTickMarkPlacement: "edges",
-          label: "Edges"
-        }), /*#__PURE__*/_jsx(BarPlot, {})]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Band Scale - Tick Filtering",
-      children: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Band Scale - Explicit Ticks",
-      children: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
-    }), /*#__PURE__*/_jsxs(Example, {
-      title: "Line Chart on Band Scale - Grid Positions",
+const tickLabelOverflowModes = ['reposition', 'fade', 'visible'];
+const ordinalLabels = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'];
+const overflowSeriesData = [10, 22, 29, 45, 98, 45, 22];
+const TickLabelOverflowYAxes = () => {
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 320,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData
+    }],
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    inset: 0,
+    children: [tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(YAxis, {
+      position: "left",
+      tickLabelOverflow: tickLabelOverflow,
+      width: 30
+    }, "left-" + tickLabelOverflow)), tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(YAxis, {
+      position: "right",
+      tickLabelOverflow: tickLabelOverflow,
+      width: 30
+    }, "right-" + tickLabelOverflow)), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
+const TickLabelOverflowXAxes = () => {
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 420,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData
+    }],
+    xAxis: {
+      data: ordinalLabels
+    },
+    yAxis: {
+      domain: {
+        min: 0
+      }
+    },
+    inset: 0,
+    children: [tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: tickLabelOverflow,
+      position: "bottom",
+      tickLabelOverflow: tickLabelOverflow
+    }, "bottom-" + tickLabelOverflow)), tickLabelOverflowModes.map(tickLabelOverflow => /*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: tickLabelOverflow,
+      position: "top",
+      tickLabelOverflow: tickLabelOverflow
+    }, "top-" + tickLabelOverflow)), /*#__PURE__*/_jsx(Line, {
+      seriesId: "line1"
+    })]
+  });
+};
+const TickLabelOverflowAllSides = () => {
+  const theme = useTheme();
+  return /*#__PURE__*/_jsxs(CartesianChart, {
+    height: 250,
+    series: [{
+      id: 'line1',
+      data: overflowSeriesData,
+      color: theme.color.accentBoldBlue
+    }],
+    xAxis: {
+      data: ordinalLabels
+    },
+    yAxis: {
+      domain: {
+        min: 0,
+        max: 100
+      }
+    },
+    inset: 0,
+    children: [/*#__PURE__*/_jsx(XAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Fade",
+      position: "bottom",
+      tickLabelOverflow: "fade"
+    }), /*#__PURE__*/_jsx(YAxis, {
+      showLine: true,
+      showTickMarks: true,
+      label: "Visible",
+      position: "left",
+      tickLabelOverflow: "visible"
+    }), /*#__PURE__*/_jsx(Line, {
+      curve: "natural",
+      seriesId: "line1"
+    })]
+  });
+};
+function ExampleNavigator() {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const examples = useMemo(() => [{
+    title: 'Basic',
+    component: /*#__PURE__*/_jsx(Simple, {})
+  }, {
+    title: 'Time of Day',
+    component: /*#__PURE__*/_jsx(TimeOfDayAxesExample, {})
+  }, {
+    title: 'Multiple Axes on Same Side',
+    component: /*#__PURE__*/_jsx(MultipleYAxesExample, {})
+  }, {
+    title: 'Strict Domain Limit',
+    component: /*#__PURE__*/_jsx(DomainLimitType, {
+      limit: "strict"
+    })
+  }, {
+    title: 'Nice Domain Limit',
+    component: /*#__PURE__*/_jsx(DomainLimitType, {
+      limit: "nice"
+    })
+  }, {
+    title: 'Band Axis Grid Alignment',
+    component: /*#__PURE__*/_jsxs(CartesianChart, {
+      height: 350,
+      inset: 8,
+      series: [{
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22]
+      }],
+      xAxis: {
+        scaleType: 'band',
+        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+      },
+      yAxis: {
+        domain: {
+          min: 0
+        }
+      },
+      children: [/*#__PURE__*/_jsx(XAxis, {
+        showGrid: true,
+        showLine: true,
+        showTickMarks: true,
+        label: "Default"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "start",
+        label: "Start"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "end",
+        label: "End"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "middle",
+        label: "Middle"
+      }), /*#__PURE__*/_jsx(XAxis, {
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: "edges",
+        label: "Edges"
+      }), /*#__PURE__*/_jsx(BarPlot, {})]
+    })
+  }, {
+    title: 'Band Scale - Tick Filtering',
+    component: /*#__PURE__*/_jsx(BandScaleTickFiltering, {})
+  }, {
+    title: 'Band Scale - Explicit Ticks',
+    component: /*#__PURE__*/_jsx(BandScaleExplicitTicks, {})
+  }, {
+    title: 'Line Chart on Band Scale - Grid Positions',
+    component: /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(LineChartOnBandScale, {
         bandGridLinePlacement: "edges"
       }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
@@ -540,13 +643,65 @@ const AxisStories = () => {
       }), /*#__PURE__*/_jsx(LineChartOnBandScale, {
         bandGridLinePlacement: "end"
       })]
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Axes on All Sides",
-      children: /*#__PURE__*/_jsx(AxesOnAllSides, {})
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Custom Tick Mark Sizes",
-      children: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
-    })]
+    })
+  }, {
+    title: 'Axes on All Sides',
+    component: /*#__PURE__*/_jsx(AxesOnAllSides, {})
+  }, {
+    title: 'Custom Tick Mark Sizes',
+    component: /*#__PURE__*/_jsx(CustomTickMarkSizes, {})
+  }, {
+    title: 'Y Axis Label Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowYAxes, {})
+  }, {
+    title: 'X Axis Label Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowXAxes, {})
+  }, {
+    title: 'Ineffective Repositioning',
+    component: /*#__PURE__*/_jsx(TickLabelOverflowAllSides, {})
+  }], []);
+  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]);
+  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(Example, {
+        children: currentExample.component
+      })]
+    })
   });
-};
-export default AxisStories;
+}
+export default ExampleNavigator;

package/esm/visualizations/chart/axis/index.js

@@ -1,5 +1,6 @@
 // codegen:start {preset: barrel, include: ./*.tsx, exclude: ./__stories__/*.tsx}
 export * from './Axis';
+export * from './AxisTickLabelOverflowMask';
 export * from './DefaultAxisTickLabel';
 export * from './XAxis';
 export * from './YAxis';

package/esm/visualizations/chart/scrubber/DefaultScrubberBeaconLabel.js

@@ -29,13 +29,13 @@ export const DefaultScrubberBeaconLabel = /*#__PURE__*/memo(_ref => {
     chartTextProps = _objectWithoutPropertiesLoose(_ref, _excluded);
   const theme = useTheme();
   return /*#__PURE__*/_jsx(ChartText, _extends({
-    disableRepositioning: true,
     background: background != null ? background : theme.color.bg,
     borderRadius: borderRadius,
     color: color != null ? color : theme.color.fgPrimary,
     elevated: elevated,
     font: font,
     inset: inset,
+    repositionAxes: "none",
     verticalAlignment: verticalAlignment
   }, chartTextProps, {
     children: label

package/esm/visualizations/chart/text/ChartText.js

@@ -34,6 +34,11 @@ const getFontWeight = (theme, font) => {
  * Vertical alignment options for chart text.
  */
 
+/**
+ * Which axes ChartText may nudge labels along to stay in bounds.
+ * @default 'both'
+ */
+
 export const ChartText = /*#__PURE__*/memo(_ref => {
   var _elevationShadow$shad, _elevationShadow$shad2, _elevationShadow$shad3, _elevationShadow$shad4, _elevationShadow$shad5, _elevationShadow$shad6, _elevationShadow$shad7;
   let {
@@ -46,6 +51,7 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     verticalAlignment = 'middle',
     paragraphAlignment = TextAlign.Left,
     disableRepositioning = false,
+    repositionAxes = disableRepositioning ? 'none' : 'both',
     bounds,
     color,
     background: backgroundProp,
@@ -183,12 +189,8 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     height: chartHeight
   }), [chartWidth, chartHeight]);
   const overflowAmount = useDerivedValue(() => {
-    if (disableRepositioning) {
-      return {
-        x: 0,
-        y: 0
-      };
-    }
+    const repositionX = repositionAxes === 'both' || repositionAxes === 'x';
+    const repositionY = repositionAxes === 'both' || repositionAxes === 'y';
     const parentBounds = bounds != null ? bounds : fullChartBounds;
     if (!parentBounds || parentBounds.width <= 0 || parentBounds.height <= 0) {
       return {
@@ -198,25 +200,25 @@ export const ChartText = /*#__PURE__*/memo(_ref => {
     }
     let offsetX = 0;
     let offsetY = 0;
-
-    // X-axis overflow
-    if (backgroundRect.value.x < parentBounds.x) {
-      offsetX = parentBounds.x - backgroundRect.value.x;
-    } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
-      offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
+    if (repositionX) {
+      if (backgroundRect.value.x < parentBounds.x) {
+        offsetX = parentBounds.x - backgroundRect.value.x;
+      } else if (backgroundRect.value.x + backgroundRect.value.width > parentBounds.x + parentBounds.width) {
+        offsetX = parentBounds.x + parentBounds.width - (backgroundRect.value.x + backgroundRect.value.width);
+      }
     }
-
-    // Y-axis overflow
-    if (backgroundRect.value.y < parentBounds.y) {
-      offsetY = parentBounds.y - backgroundRect.value.y;
-    } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
-      offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
+    if (repositionY) {
+      if (backgroundRect.value.y < parentBounds.y) {
+        offsetY = parentBounds.y - backgroundRect.value.y;
+      } else if (backgroundRect.value.y + backgroundRect.value.height > parentBounds.y + parentBounds.height) {
+        offsetY = parentBounds.y + parentBounds.height - (backgroundRect.value.y + backgroundRect.value.height);
+      }
     }
     return {
       x: offsetX,
       y: offsetY
     };
-  }, [backgroundRect, fullChartBounds, bounds, disableRepositioning]);
+  }, [backgroundRect, fullChartBounds, bounds, repositionAxes]);
 
   // Final adjusted positions
   const backgroundRectWithOffset = useDerivedValue(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.13.0",
+  "version": "9.14.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -218,7 +218,7 @@
     "react-native-worklets": "0.5.2"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^9.13.0",
+    "@coinbase/cds-common": "^9.14.0",
     "@coinbase/cds-icons": "^5.21.0",
     "@coinbase/cds-illustrations": "^4.47.0",
     "@coinbase/cds-lottie-files": "^3.3.4",