@coinbase/cds-mcp-server 8.21.8 → 8.22.2

package/mcp-docs/mobile/components/VStack.txt

@@ -151,7 +151,7 @@ function ResponsiveVStack() {
 | `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
 | `bottom` | `string \| number` | No | `-` | - |
 | `color` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `-` | - |
-| `columnGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `dangerouslySetBackground` | `string` | No | `-` | - |
 | `display` | `flex \| none` | No | `-` | - |
 | `elevation` | `0 \| 1 \| 2` | No | `-` | Determines box shadow styles. Parent should have overflow set to visible to ensure styles are not clipped. |
@@ -164,19 +164,19 @@ function ResponsiveVStack() {
 | `fontFamily` | `inherit \| FontFamily` | No | `-` | - |
 | `fontSize` | `inherit \| FontSize` | No | `-` | - |
 | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
-| `gap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `height` | `string \| number` | No | `-` | - |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
 | `left` | `string \| number` | No | `-` | - |
 | `lineHeight` | `inherit \| LineHeight` | No | `-` | - |
-| `margin` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginBottom` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginEnd` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginStart` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginTop` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginX` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
-| `marginY` | `0 \| -1 \| -2 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1.5` | No | `-` | - |
+| `margin` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginBottom` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginEnd` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginStart` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginTop` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginX` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
+| `marginY` | `0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10` | No | `-` | - |
 | `maxHeight` | `string \| number` | No | `-` | - |
 | `maxWidth` | `string \| number` | No | `-` | - |
 | `minHeight` | `string \| number` | No | `-` | - |
@@ -195,18 +195,18 @@ function ResponsiveVStack() {
 | `onPointerUpCapture` | `((event: PointerEvent) => void)` | No | `-` | - |
 | `opacity` | `number \| AnimatedNode` | No | `-` | - |
 | `overflow` | `visible \| hidden \| scroll` | No | `-` | - |
-| `padding` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingBottom` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingEnd` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingStart` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingTop` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingX` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
-| `paddingY` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
-| `position` | `absolute \| relative \| static \| fixed \| sticky` | No | `-` | - |
+| `position` | `static \| relative \| fixed \| absolute \| sticky` | No | `-` | - |
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `right` | `string \| number` | No | `-` | - |
-| `rowGap` | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1.5` | No | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `style` | `false \| RegisteredStyle<ViewStyle> \| Value \| AnimatedInterpolation<string \| number> \| WithAnimatedObject<ViewStyle> \| WithAnimatedArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle> \| RecursiveArray<Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>> \| readonly (Falsy \| ViewStyle \| RegisteredStyle<ViewStyle>)[]> \| null` | No | `-` | - |
 | `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Used to locate this view in end-to-end tests. |
 | `textAlign` | `left \| right \| auto \| center \| justify` | No | `-` | - |

package/mcp-docs/mobile/components/XAxis.txt

@@ -29,7 +29,7 @@ The XAxis component provides a horizontal axis for charts with automatic tick ge
   }}
 >
   <XAxis showLine showTickMarks showGrid />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -58,7 +58,7 @@ XAxis supports `linear` (default), `log`, and `band` scale types.
   }}
 >
   <XAxis showLine showTickMarks showGrid />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
 </CartesianChart>
 ```
 
@@ -81,7 +81,7 @@ You can pass in either an object (AxisBounds) with `min` and `max` properties (b
   }}
 >
   <XAxis showLine showTickMarks showGrid tickInterval={16} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
 </CartesianChart>
 ```
 
@@ -108,7 +108,7 @@ You can pass in either an object (AxisBounds) with `min` and `max` properties (b
     range: ({ min, max }) => ({ min, max: max - 64 }),
   }}
 >
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
 </CartesianChart>
 ```
 
@@ -134,7 +134,7 @@ Using string data will allow you to set string x values for each data point.
   }}
 >
   <XAxis showLine showTickMarks showGrid />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
 </CartesianChart>
 ```
 
@@ -153,7 +153,7 @@ Using number data with a numeric scale will allow you to adjust the x values for
   ]}
   height={250}
   showArea
-  renderPoints={() => true}
+  points
   curve="natural"
   showXAxis
   xAxis={{ data: [1, 2, 3, 5, 8, 10], showLine: true, showTickMarks: true, showGrid: true }}
@@ -253,7 +253,7 @@ function XAxisPositionExample() {
   return (
     <LineChart
       enableScrubbing
-      curve="monotone"
+
       height={400}
       series={[
         {
@@ -319,7 +319,7 @@ function XAxisGridExample() {
         }}
       >
         <XAxis showLine showTickMarks showGrid={showGrid} />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -348,7 +348,7 @@ function CustomGridLineExample() {
       }}
     >
       <XAxis showLine showTickMarks showGrid GridLineComponent={ThinSolidLine} />
-      <Line seriesId="prices" curve="monotone" showArea />
+      <Line seriesId="prices"  showArea />
       <Scrubber />
     </CartesianChart>
   );
@@ -383,7 +383,7 @@ function XAxisLineExample() {
         }}
       >
         <XAxis showLine={showLine} showTickMarks showGrid />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -419,7 +419,7 @@ function XAxisLineStylesExample() {
           showGrid
           styles={{ line: { stroke: theme.color.accentBoldGreen, strokeWidth: 4 } }}
         />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -446,7 +446,7 @@ The `size` prop sets the size of the axis in pixels. The default is 32 for XAxis
   }}
 >
   <XAxis showLine showTickMarks showGrid height={64} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -469,7 +469,7 @@ You can use the `ticks`, `requestedTickCount`, and `tickInterval` (default for X
   ]}
 >
   <XAxis showLine showTickMarks showGrid ticks={[0, 2, 4, 6]} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -488,7 +488,7 @@ Using `requestedTickCount` will use [D3's ticks function](https://d3js.org/d3-ar
   ]}
 >
   <XAxis showLine showTickMarks showGrid requestedTickCount={4} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -507,7 +507,7 @@ Using `requestedTickCount` will use [D3's ticks function](https://d3js.org/d3-ar
   ]}
 >
   <XAxis showLine showTickMarks showGrid tickInterval={16} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -540,7 +540,7 @@ function XAxisTickMarksExample() {
         }}
       >
         <XAxis showLine showTickMarks={showTickMarks} tickMarkSize={16} showGrid />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -567,7 +567,7 @@ You can customize the tick labels using the `tickLabelFormatter` prop. It will r
   }}
 >
   <XAxis showGrid tickLabelFormatter={(value) => `Day of ${value}`} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -589,29 +589,91 @@ If no data is set for the axis, it will receive the regular number value of the
   }}
 >
   <XAxis showGrid tickLabelFormatter={(value) => value * 2} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
 
+#### Label
+
+You can add a label to the axis using the `label` prop.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  xAxis={{
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+  }}
+>
+  <XAxis showLine showTickMarks showGrid label="Month" />
+  <YAxis showGrid />
+  <Line seriesId="prices" showArea />
+  <Scrubber />
+</CartesianChart>
+```
+
+##### Custom Tick Labels
+
+You can create custom tick label components using the `TickLabelComponent` prop for advanced styling that works cross-platform.
+
+```jsx
+function CustomTickLabelExample() {
+  const theme = useTheme();
+
+  const CustomXAxisTickLabel = useCallback(
+    (props) => <DefaultAxisTickLabel {...props} color={theme.color.accentBoldBlue} />,
+    [theme],
+  );
+
+  return (
+    <CartesianChart
+      enableScrubbing
+      height={250}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        },
+      ]}
+      xAxis={{
+        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
+      }}
+    >
+      <XAxis showLine showTickMarks showGrid TickLabelComponent={CustomXAxisTickLabel} />
+      <YAxis showGrid />
+      <Line seriesId="prices" showArea />
+      <Scrubber />
+    </CartesianChart>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `GridLineComponent` | `LineComponent` | No | `DottedLine` | Component to render the grid lines. |
-| `className` | `string` | No | `-` | Custom className for the axis. |
-| `classNames` | `{ root?: string; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
-| `height` | `number` | No | `32` | Height of the axis. This value is inclusive of the padding. |
+| `LineComponent` | `LineComponent` | No | `SolidLine` | Component to render the axis line. |
+| `TickLabelComponent` | `AxisTickLabelComponent` | No | `DefaultAxisTickLabel` | Component to render tick labels. Allows for custom styling and formatting that works cross-platform. |
+| `TickMarkLineComponent` | `LineComponent` | No | `SolidLine` | Component to render the tick marks. |
+| `height` | `number` | No | `32 when no label is provided, 52 when a label is provided` | Height of the axis. This value is inclusive of the padding. |
+| `label` | `string` | No | `-` | Label text to display for the axis. |
+| `labelGap` | `number` | No | `4` | Gap between the tick labels and the axis label. |
 | `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
 | `position` | `top \| bottom` | No | `'bottom'` | The position of the axis relative to the charts drawing area. |
 | `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
 | `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
 | `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
 | `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
-| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
-| `styles` | `{ root?: CSSProperties; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
 | `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
-| `tickLabelFormatter` | `((value: any) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
+| `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
 | `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
 | `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
 | `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |

package/mcp-docs/mobile/components/YAxis.txt

@@ -26,7 +26,7 @@ The YAxis component provides a vertical axis for charts with automatic tick gene
   ]}
 >
   <YAxis showGrid />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -92,7 +92,7 @@ You can pass in either an object (AxisBounds) with `min` and `max` properties (b
   }}
 >
   <YAxis showGrid />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
 </CartesianChart>
 ```
 
@@ -119,7 +119,7 @@ You can pass in either an object (AxisBounds) with `min` and `max` properties (b
     range: ({ min, max }) => ({ min: min + 96, max: max - 96 }),
   }}
 >
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
 </CartesianChart>
 ```
 
@@ -183,7 +183,7 @@ function YAxisGridExample() {
         ]}
       >
         <YAxis showGrid={showGrid} />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -257,7 +257,7 @@ function YAxisLineExample() {
         ]}
       >
         <YAxis showLine={showLine} />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -293,7 +293,7 @@ function YAxisLineStylesExample() {
           showGrid
           styles={{ line: { stroke: theme.color.accentBoldGreen, strokeWidth: 4 } }}
         />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -354,7 +354,7 @@ You can use the `ticks`, `requestedTickCount` (default for YAxis), and `tickInte
   ]}
 >
   <YAxis showLine showTickMarks showGrid ticks={[34, 56, 80]} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -375,7 +375,7 @@ This is the default behavior for YAxis, and defaults to `5`.
   ]}
 >
   <YAxis showLine showTickMarks showGrid requestedTickCount={5} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -394,7 +394,7 @@ This is the default behavior for YAxis, and defaults to `5`.
   ]}
 >
   <YAxis showLine showTickMarks showGrid tickInterval={8} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
@@ -425,7 +425,7 @@ function YAxisTickMarksExample() {
         ]}
       >
         <YAxis showLine showTickMarks={showTickMarks} tickMarkSize={16} showGrid />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -449,11 +449,68 @@ You can customize the tick labels using the `tickLabelFormatter` prop.
   ]}
 >
   <YAxis showGrid tickLabelFormatter={(value) => `$${value}`} />
-  <Line seriesId="prices" curve="monotone" showArea />
+  <Line seriesId="prices" showArea />
   <Scrubber />
 </CartesianChart>
 ```
 
+#### Label
+
+You can add a label to the axis using the `label` prop.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+>
+  <YAxis showGrid label="Price ($)" tickLabelFormatter={(value) => `$${value}`} />
+  <Line seriesId="prices" showArea />
+  <Scrubber />
+</CartesianChart>
+```
+
+##### Custom Tick Labels
+
+You can create custom tick label components using the `TickLabelComponent` prop for advanced styling and positioning that works cross-platform.
+
+```jsx
+function CustomTickLabelExample() {
+  const CustomYAxisTickLabel = useCallback(
+    (props) => <DefaultAxisTickLabel {...props} dx={4} dy={-12} horizontalAlignment="left" />,
+    [],
+  );
+
+  return (
+    <CartesianChart
+      enableScrubbing
+      height={250}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+        },
+      ]}
+    >
+      <YAxis
+        showGrid
+        position="left"
+        width={0}
+        tickLabelFormatter={(value) => `$${value}`}
+        TickLabelComponent={CustomYAxisTickLabel}
+      />
+      <Line seriesId="prices" showArea />
+      <Scrubber />
+    </CartesianChart>
+  );
+}
+```
+
 ### Customization
 
 #### Multiple Y Axes
@@ -544,24 +601,25 @@ function MultipleYAxesExample() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `GridLineComponent` | `LineComponent` | No | `DottedLine` | Component to render the grid lines. |
+| `LineComponent` | `LineComponent` | No | `SolidLine` | Component to render the axis line. |
+| `TickLabelComponent` | `AxisTickLabelComponent` | No | `DefaultAxisTickLabel` | Component to render tick labels. Allows for custom styling and formatting that works cross-platform. |
+| `TickMarkLineComponent` | `LineComponent` | No | `SolidLine` | Component to render the tick marks. |
 | `axisId` | `string` | No | `-` | The ID of the axis to render. Defaults to defaultAxisId if not specified. |
-| `className` | `string` | No | `-` | Custom className for the axis. |
-| `classNames` | `{ root?: string; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
+| `label` | `string` | No | `-` | Label text to display for the axis. |
+| `labelGap` | `number` | No | `4` | Gap between the tick labels and the axis label. |
 | `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
 | `position` | `left \| right` | No | `'right'` | The position of the axis relative to the charts drawing area. |
 | `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
 | `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
 | `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
 | `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
-| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
-| `styles` | `{ root?: CSSProperties; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
 | `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
-| `tickLabelFormatter` | `((value: any) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
+| `tickLabelFormatter` | `((value: number) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
 | `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
 | `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
 | `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |
 | `tickMinStep` | `number` | No | `1` | Minimum step size for tick generation. Prevents the step from being smaller than this value. |
 | `ticks` | `number[] \| ((value: number) => boolean)` | No | `-` | Custom tick configuration for the axis. When provided, this overrides the requestedTickCount property.  - **Array**: Uses these exact values for tick positioning and labels. - **Function**: Filters based on the predicate function.   - For **x-axis**: Checks every data index (0, 1, 2, ..., dataLength-1)   - For **y-axis**: Filters d3-generated tick values |
-| `width` | `number` | No | `44` | Width of the axis. This value is inclusive of the padding. |
+| `width` | `number` | No | `44 when no label is provided, 64 when a label is provided` | Width of the axis. This value is inclusive of the padding. |
 
 

package/mcp-docs/mobile/routes.txt

@@ -105,7 +105,7 @@
 - [Sparkline](mobile/components/Sparkline.txt): A small line chart component for displaying data trends.
 - [Scrubber](mobile/components/Scrubber.txt): An interactive scrubber component for exploring individual data points in charts. Displays values on hover or drag and supports custom labels and formatting.
 - [ReferenceLine](mobile/components/ReferenceLine.txt): A horizontal or vertical reference line to mark important values on a chart, such as targets, thresholds, or baseline values.
-- [Point](mobile/components/Point.txt): Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and interactivity.
+- [Point](mobile/components/Point.txt): Visual markers that highlight specific data values on a chart. Points can be customized with different colors, sizes, and labels.
 - [PeriodSelector](mobile/components/PeriodSelector.txt): A selector component for choosing time periods in charts.
 - [LineChart](mobile/components/LineChart.txt): A flexible line chart component for displaying data trends over time. Supports multiple series, custom curves, areas, scrubbing, and interactive data exploration.
 - [CartesianChart](mobile/components/CartesianChart.txt): A flexible, low-level chart component for displaying data in an x/y coordinate space. Provides a foundation for building custom chart visualizations with full control over rendering.