@coinbase/cds-mcp-server 8.21.8 → 8.22.1

package/mcp-docs/web/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 }}
@@ -252,7 +252,7 @@ function XAxisPositionExample() {
   return (
     <LineChart
       enableScrubbing
-      curve="monotone"
+
       height={400}
       series={[
         {
@@ -318,7 +318,7 @@ function XAxisGridExample() {
         }}
       >
         <XAxis showLine showTickMarks showGrid={showGrid} />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -347,7 +347,7 @@ function CustomGridLineExample() {
       }}
     >
       <XAxis showLine showTickMarks showGrid GridLineComponent={ThinSolidLine} />
-      <Line seriesId="prices" curve="monotone" showArea />
+      <Line seriesId="prices"  showArea />
       <Scrubber />
     </CartesianChart>
   );
@@ -382,7 +382,7 @@ function XAxisLineExample() {
         }}
       >
         <XAxis showLine={showLine} showTickMarks showGrid />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -417,7 +417,7 @@ function XAxisLineStylesExample() {
           showGrid
           styles={{ line: { stroke: 'var(--color-accentBoldGreen)', strokeWidth: 4 } }}
         />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -444,7 +444,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>
 ```
@@ -467,7 +467,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>
 ```
@@ -486,7 +486,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>
 ```
@@ -505,7 +505,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>
 ```
@@ -538,7 +538,7 @@ function XAxisTickMarksExample() {
         }}
       >
         <XAxis showLine showTickMarks={showTickMarks} tickMarkSize={16} showGrid />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -565,7 +565,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>
 ```
@@ -587,19 +587,83 @@ 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 live
+<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 live
+function CustomTickLabelExample() {
+  const CustomXAxisTickLabel = useCallback(
+    (props) => <DefaultAxisTickLabel {...props} color="var(--color-accentBoldBlue)" />,
+    [],
+  );
+
+  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. |
+| `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. |
 | `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. |
+| `classNames` | `{ root?: string; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
+| `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. |
@@ -607,9 +671,9 @@ If no data is set for the axis, it will receive the regular number value of the
 | `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. |
+| `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; 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/web/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>
 ```
@@ -55,7 +55,7 @@ YAxis supports `linear` (default) and `log` scale types. Both `linear` and `log`
     scaleType: 'log',
   }}
 >
-  <Line seriesId="growthExponential" />
+  <Line seriesId="growthExponential" showArea />
   <YAxis
     showGrid
     showLine
@@ -86,7 +86,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>
 ```
 
@@ -113,7 +113,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>
 ```
 
@@ -177,7 +177,7 @@ function YAxisGridExample() {
         ]}
       >
         <YAxis showGrid={showGrid} />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -250,7 +250,7 @@ function YAxisLineExample() {
         ]}
       >
         <YAxis showLine={showLine} />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -285,7 +285,7 @@ function YAxisLineStylesExample() {
           showGrid
           styles={{ line: { stroke: 'var(--color-accentBoldGreen)', strokeWidth: 4 } }}
         />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -340,7 +340,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>
 ```
@@ -361,7 +361,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>
 ```
@@ -380,7 +380,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>
 ```
@@ -411,7 +411,7 @@ function YAxisTickMarksExample() {
         ]}
       >
         <YAxis showLine showTickMarks={showTickMarks} tickMarkSize={16} showGrid />
-        <Line seriesId="prices" curve="monotone" showArea />
+        <Line seriesId="prices" showArea />
         <Scrubber />
       </CartesianChart>
     </VStack>
@@ -435,89 +435,128 @@ 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 live
+<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 live
+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
 
 ```jsx live
-<VStack gap={2}>
-  <CartesianChart
-    height={400}
-    series={[
-      {
-        id: 'revenue',
-        data: [455, 520, 380, 455, 285, 235],
-        yAxisId: 'revenue',
-        color: 'var(--color-accentBoldYellow)',
-      },
-      {
-        id: 'profitMargin',
-        data: [23, 20, 16, 38, 12, 9],
-        yAxisId: 'profitMargin',
-        color: 'var(--color-fgPositive)',
-      },
-    ]}
-    xAxis={{
-      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
-      scaleType: 'band',
-    }}
-    yAxis={[
-      {
-        id: 'revenue',
-        domain: { min: 0 },
-      },
-      {
-        id: 'profitMargin',
-        domain: { min: 0, max: 100 },
-      },
-    ]}
-  >
-    <XAxis showLine showTickMarks />
-    <YAxis
-      showGrid
-      showLine
-      showTickMarks
-      axisId="revenue"
-      position="left"
-      requestedTickCount={5}
-      width={60}
-      tickLabelFormatter={(value) => `$${value}k`}
-    />
-    <YAxis
-      showLine
-      showTickMarks
-      axisId="profitMargin"
-      requestedTickCount={5}
-      tickLabelFormatter={(value) => `${value}%`}
-    />
-    <BarPlot />
-  </CartesianChart>
-  <HStack justifyContent="center" gap={2}>
-    <Box alignItems="center" gap={0.5}>
-      <Box
-        borderRadius={1000}
-        width={10}
-        height={10}
-        style={{ background: 'var(--color-accentBoldYellow)' }}
-      />
-      <Text font="label2">Revenue ($)</Text>
-    </Box>
-    <Box alignItems="center" gap={0.5}>
-      <Box
-        borderRadius={1000}
-        width={10}
-        height={10}
-        style={{ background: 'var(--color-fgPositive)' }}
-      />
-      <Text font="label2">Profit Margin (%)</Text>
-    </Box>
-  </HStack>
-</VStack>
+<CartesianChart
+  height={400}
+  series={[
+    {
+      id: 'revenue',
+      data: [455, 520, 380, 455, 285, 235],
+      yAxisId: 'revenue',
+      color: 'var(--color-accentBoldYellow)',
+    },
+    {
+      id: 'profitMargin',
+      data: [23, 20, 16, 38, 12, 9],
+      yAxisId: 'profitMargin',
+      color: 'var(--color-fgPositive)',
+    },
+  ]}
+  xAxis={{
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    scaleType: 'band',
+  }}
+  yAxis={[
+    {
+      id: 'revenue',
+      domain: { min: 0 },
+    },
+    {
+      id: 'profitMargin',
+      domain: { min: 0, max: 100 },
+    },
+  ]}
+  inset={{ left: 0, right: 0 }}
+>
+  <XAxis showLine showTickMarks label="Month" />
+  <YAxis
+    showGrid
+    showLine
+    showTickMarks
+    axisId="revenue"
+    position="left"
+    label="Revenue"
+    width={80}
+    requestedTickCount={5}
+    tickLabelFormatter={(value) => `$${value}k`}
+  />
+  <YAxis
+    showLine
+    showTickMarks
+    axisId="profitMargin"
+    label="Profit Margin"
+    width={70}
+    requestedTickCount={5}
+    tickLabelFormatter={(value) => `${value}%`}
+  />
+  <BarPlot />
+</CartesianChart>
 ```
 
 ## Props
@@ -525,9 +564,14 @@ You can customize the tick labels using the `tickLabelFormatter` prop.
 | 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. |
+| `classNames` | `{ root?: string; label?: string \| undefined; 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. |
@@ -535,14 +579,14 @@ You can customize the tick labels using the `tickLabelFormatter` prop.
 | `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. |
+| `styles` | `{ root?: CSSProperties; label?: CSSProperties \| undefined; 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.21.8",
+  "version": "8.22.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",