feat: allow customization of axis tick mark and grid line alignment in band scale

apps/docs/docs/components/graphs/XAxis/_mobileExamples.mdx

@@ -343,6 +343,42 @@ function CustomGridLineExample() {
 }
 ```
 
+On band scales, you can also use `bandGridLinePlacement` to control where grid lines appear relative to each band.
+
+Using edges will place a grid line at the start of each band, plus a grid line at the end of the last band.
+
+```jsx
+function BandGridPlacement() {
+  const [selectedBandGridPlacement, setSelectedBandGridPlacement] = useState('edges');
+
+  return (
+    <CartesianChart
+      height={250}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22],
+        },
+      ]}
+      xAxis={{
+        scaleType: 'band',
+        data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+      }}
+      yAxis={{ domain: { min: 0 } }}
+    >
+      <XAxis
+        bandGridLinePlacement={selectedBandGridPlacement}
+        GridLineComponent={SolidLine}
+        showGrid
+        showLine
+        showTickMarks
+      />
+      <BarPlot />
+    </CartesianChart>
+  );
+}
+```
+
 ### Line
 
 You can show the axis line using the `showLine` prop.
@@ -536,6 +572,41 @@ function XAxisTickMarksExample() {
 }
 ```
 
+On band scales, you can also use `bandTickMarkPlacement` to control where tick marks appear relative to each band.
+
+Using edges will place a tick mark at the start of each band, plus a tick mark at the end of the last band.
+
+```jsx
+function BandTickMarkPlacement() {
+  const [selectedBandTickMarkPlacement, setSelectedBandTickMarkPlacement] = useState('middle');
+
+  return (
+    <CartesianChart
+      height={250}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22],
+        },
+      ]}
+      xAxis={{
+        scaleType: 'band',
+        data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+      }}
+      yAxis={{ domain: { min: 0 } }}
+    >
+      <XAxis
+        bandTickMarkPlacement={selectedBandTickMarkPlacement}
+        showLine
+        showTickMarks
+        tickMarkSize={8}
+      />
+      <BarPlot />
+    </CartesianChart>
+  );
+}
+```
+
 ### Tick Labels
 
 You can customize the tick labels using the `tickLabelFormatter` prop. It will receive the x data value of the tick. Meaning, if data is provided for the axis, it will receive the string label for the tick.

apps/docs/docs/components/graphs/XAxis/_webExamples.mdx

@@ -342,6 +342,62 @@ function CustomGridLineExample() {
 }
 ```
 
+On band scales, you can also use `bandGridLinePlacement` to control where grid lines appear relative to each band.
+
+Using edges will place a grid line at the start of each band, plus a grid line at the end of the last band.
+
+```jsx live
+function BandGridPlacement() {
+  const bandGridLinePlacements = [
+    { id: 'edges', label: 'Edges' },
+    { id: 'start', label: 'Start' },
+    { id: 'middle', label: 'Middle' },
+    { id: 'end', label: 'End' },
+  ];
+  const [selectedBandGridPlacement, setSelectedBandGridPlacement] = useState(
+    bandGridLinePlacements[0],
+  );
+
+  return (
+    <VStack gap={2}>
+      <HStack justifyContent="flex-end" gap={2} alignItems="center">
+        <Text as="h3" font="headline">
+          Band Grid Placement
+        </Text>
+        <SegmentedTabs
+          activeTab={selectedBandGridPlacement}
+          onChange={setSelectedBandGridPlacement}
+          tabs={bandGridLinePlacements}
+        />
+      </HStack>
+      <CartesianChart
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22],
+          },
+        ]}
+        xAxis={{
+          scaleType: 'band',
+          data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+        }}
+        yAxis={{ domain: { min: 0 } }}
+      >
+        <XAxis
+          bandGridLinePlacement={selectedBandGridPlacement.id}
+          GridLineComponent={SolidLine}
+          showGrid
+          showLine
+          showTickMarks
+        />
+        <BarPlot />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
 ### Line
 
 You can show the axis line using the `showLine` prop.
@@ -534,6 +590,61 @@ function XAxisTickMarksExample() {
 }
 ```
 
+On band scales, you can also use `bandTickMarkPlacement` to control where tick marks appear relative to each band.
+
+Using edges will place a tick mark at the start of each band, plus a tick mark at the end of the last band.
+
+```jsx live
+function BandTickMarkPlacement() {
+  const bandTickMarkPlacements = [
+    { id: 'middle', label: 'Middle' },
+    { id: 'edges', label: 'Edges' },
+    { id: 'start', label: 'Start' },
+    { id: 'end', label: 'End' },
+  ];
+  const [selectedBandTickMarkPlacement, setSelectedBandTickMarkPlacement] = useState(
+    bandTickMarkPlacements[0],
+  );
+
+  return (
+    <VStack gap={2}>
+      <HStack justifyContent="flex-end" gap={2} alignItems="center">
+        <Text as="h3" font="headline">
+          Band Tick Mark Placement
+        </Text>
+        <SegmentedTabs
+          activeTab={selectedBandTickMarkPlacement}
+          onChange={setSelectedBandTickMarkPlacement}
+          tabs={bandTickMarkPlacements}
+        />
+      </HStack>
+      <CartesianChart
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22],
+          },
+        ]}
+        xAxis={{
+          scaleType: 'band',
+          data: ['April 1', 'April 2', 'April 3', 'April 4', 'April 5', 'April 6', 'April 7'],
+        }}
+        yAxis={{ domain: { min: 0 } }}
+      >
+        <XAxis
+          bandTickMarkPlacement={selectedBandTickMarkPlacement.id}
+          showLine
+          showTickMarks
+          tickMarkSize={8}
+        />
+        <BarPlot />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
 ### Tick Labels
 
 You can customize the tick labels using the `tickLabelFormatter` prop. It will receive the x data value of the tick. Meaning, if data is provided for the axis, it will receive the string label for the tick.

packages/mobile-visualization/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

packages/mobile-visualization/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile-visualization",
-  "version": "3.4.0-beta.10",
+  "version": "3.4.0-beta.11",
   "description": "Coinbase Design System - Mobile Visualization Native",
   "repository": {
     "type": "git",

packages/mobile-visualization/src/chart/axis/Axis.tsx

@@ -2,51 +2,14 @@ import type React from 'react';
 
 import { type LineComponent } from '../line';
 import type { ChartTextChildren, ChartTextProps } from '../text/ChartText';
+import { accessoryFadeTransitionDuration, 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 const axisTickLabelsInitialAnimationVariants = {
-  initial: {
-    opacity: 0,
-  },
-  animate: {
-    opacity: 1,
-    transition: {
-      duration: 0,
-      delay: 0,
-    },
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      duration: 0.15,
-    },
-  },
-};
-
-/**
- * Animation variants for axis elements - updates (used for both grid lines and tick labels)
- */
-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,
 };
 
 export type AxisTickLabelComponentProps = Pick<
@@ -70,6 +33,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.
    */