@coinbase/cds-mcp-server 8.52.2 → 8.53.1

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

@@ -1,6 +1,6 @@
 # InputChip
 
-A Chip used for removable selections.
+A Chip used for removing selected values.
 
 ## Import
 
@@ -10,12 +10,38 @@ import { InputChip } from '@coinbase/cds-mobile/chips/InputChip'
 
 ## Examples
 
-### Basic usage
+InputChip is built for remove actions. For other uses, see [Chip](/components/inputs/Chip/) which supports interaction.
+
+### Basics
+
+Use `onPress` for remove behavior.
+
+```tsx
+function Example() {
+  const [selectedValues, setSelectedValues] = React.useState(['BTC', 'ETH', 'SOL']);
+
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      {selectedValues.map((value) => (
+        <InputChip
+          key={value}
+          onPress={() => setSelectedValues((current) => current.filter((item) => item !== value))}
+          value={value}
+        />
+      ))}
+    </HStack>
+  );
+}
+```
+
+#### Disabled
+
+Use `disabled` when the value should stay visible but not removable.
 
 ```tsx
 function Example() {
   return (
-    <HStack gap={2}>
+    <HStack gap={2} flexWrap="wrap">
       <InputChip onPress={() => console.log('Remove Basic')} value="Basic Chip" />
       <InputChip disabled onPress={() => {}} value="Disabled Chip" />
     </HStack>
@@ -23,20 +49,22 @@ function Example() {
 }
 ```
 
-### With Custom Start Element
+### Styling
+
+#### With start content
 
 ```tsx
 function Example() {
   return (
     <VStack gap={2}>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <InputChip
           onPress={() => console.log('Remove Star')}
           value="With Icon"
           start={<Icon name="star" />}
         />
       </HStack>
-      <HStack gap={2}>
+      <HStack gap={2} flexWrap="wrap">
         <InputChip
           onPress={() => console.log('Remove BTC')}
           value="BTC"
@@ -53,16 +81,54 @@ function Example() {
 }
 ```
 
-### With Custom Accessibility Label
+#### Compact
+
+Use `compact` to reduce chip height and spacing in dense layouts.
+
+```tsx
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <InputChip onPress={() => console.log('Remove Default')} value="Default" />
+      <InputChip compact onPress={() => console.log('Remove Compact')} value="Compact" />
+    </HStack>
+  );
+}
+```
+
+#### Invert color scheme
+
+Use `invertColorScheme` to emphasize removable values.
+
+```tsx
+function Example() {
+  return (
+    <HStack gap={2} flexWrap="wrap">
+      <InputChip onPress={() => console.log('Remove Default')} value="Default" />
+      <InputChip
+        invertColorScheme
+        onPress={() => console.log('Remove Inverted')}
+        value="Inverted"
+      />
+    </HStack>
+  );
+}
+```
+
+### Accessibility
+
+InputChip defaults to a remove label (`Remove ${children}` for string content, otherwise `Remove option`).
+Override `accessibilityLabel` when you need more specific wording.
 
 ```tsx
 function Example() {
   return (
-    <HStack gap={2}>
+    <HStack gap={2} flexWrap="wrap">
+      <InputChip onPress={() => console.log('Remove BTC')} value="BTC" />
       <InputChip
         onPress={() => console.log('Remove Custom')}
         value="Custom Label"
-        accessibilityLabel="Custom remove action"
+        accessibilityLabel="Remove custom selection"
       />
     </HStack>
   );

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

@@ -75,66 +75,86 @@ function HorizontalLine() {
 LineChart also supports multiple lines, interaction, and axes.
 Other props, such as `areaType` can be applied to the chart as a whole or per series.
 
-```jsx
-<LineChart
-  enableScrubbing
-  showArea
-  series={[
-    {
-      id: 'pageViews',
-      data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
-      color: theme.color.accentBoldGreen,
-      // Label will render next to scrubber beacon
-      label: 'Page Views',
-    },
-    {
-      id: 'uniqueVisitors',
-      data: [4000, 3000, 2000, 2780, 1890, 2390, 3490],
-      color: theme.color.accentBoldPurple,
-      label: 'Unique Visitors',
-      // Default area is gradient
-      areaType: 'dotted',
-    },
-  ]}
-  xAxis={{
-    // Used on the x-axis to provide context for each index from the series data array
-    data: ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'],
-  }}
->
-  <Scrubber />
-</LineChart>
+```tsx
+function MultipleLine() {
+  const pages = useMemo(
+    () => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'],
+    [],
+  );
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
+
+  const chartAccessibilityLabel = `Website visitors across ${pageViews.length} pages.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) =>
+      `${pages[index]} has ${pageViews[index]} views and ${uniqueVisitors[index]} unique visitors.`,
+    [pages, pageViews, uniqueVisitors],
+  );
+
+  return (
+    <LineChart
+      enableScrubbing
+      showArea
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
+      series={[
+        {
+          id: 'pageViews',
+          data: pageViews,
+          color: theme.color.accentBoldGreen,
+          label: 'Page Views',
+        },
+        {
+          id: 'uniqueVisitors',
+          data: uniqueVisitors,
+          color: theme.color.accentBoldPurple,
+          label: 'Unique Visitors',
+          areaType: 'dotted',
+        },
+      ]}
+      xAxis={{ data: pages }}
+    >
+      <Scrubber />
+    </LineChart>
+  );
+}
 ```
 
 ### Data
 
 The data array for each series defines the y values for that series. You can adjust the y values for a series of data by setting the `data` prop on the xAxis.
 
-```jsx
-const yData = [2, 5.5, 2, 8.5, 1.5, 5];
-const xData = [1, 2, 3, 5, 8, 10];
+```tsx
+function DataFormat() {
+  const yData = useMemo(() => [2, 5.5, 2, 8.5, 1.5, 5], []);
+  const xData = useMemo(() => [1, 2, 3, 5, 8, 10], []);
+
+  const chartAccessibilityLabel = `Chart with custom X and Y data. ${yData.length} data points.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => `Point ${index + 1}: X value ${xData[index]}, Y value ${yData[index]}`,
+    [xData, yData],
+  );
 
-return (
-  <LineChart
-    enableScrubbing
-    showArea
-    series={[
-      {
-        id: 'line',
-        data: yData,
-      },
-    ]}
-    xAxis={{ data: xData, showLine: true, showTickMarks: true, showGrid: true }}
-    yAxis={{
-      domain: { min: 0 },
-      position: 'left',
-      showLine: true,
-      showTickMarks: true,
-      showGrid: true,
-    }}
-  >
-    <Scrubber />
-  </LineChart>
-);
+  return (
+    <LineChart
+      enableScrubbing
+      showArea
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
+      series={[{ id: 'line', data: yData }]}
+      xAxis={{ data: xData, showLine: true, showTickMarks: true, showGrid: true }}
+      yAxis={{
+        domain: { min: 0 },
+        position: 'left',
+        showLine: true,
+        showTickMarks: true,
+        showGrid: true,
+      }}
+    >
+      <Scrubber />
+    </LineChart>
+  );
+}
 ```
 
 #### Live Updates
@@ -143,7 +163,7 @@ You can change the data passed in via `series` prop to update the chart.
 
 You can also use the `useRef` hook to reference the scrubber and pulse it on each update.
 
-```jsx
+```tsx
 function LiveUpdates() {
   const scrubberRef = useRef < ScrubberRef > null;
 
@@ -198,10 +218,18 @@ function LiveUpdates() {
     return () => clearInterval(priceUpdateInterval);
   }, [intervalSeconds, maxPercentChange]);
 
+  const chartAccessibilityLabel = `Live price chart with ${priceData.length} data points.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => `Point ${index + 1}: ${priceData[index]}`,
+    [priceData],
+  );
+
   return (
     <LineChart
       enableScrubbing
       showArea
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
       height={200}
       inset={{ right: 64 }}
       series={[
@@ -226,9 +254,24 @@ Note that scrubber beacons and points are still only shown at non-null data valu
 ```tsx
 function MissingData() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, null, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, null, 2780, 1890, 2390, 3490];
+  const pages = useMemo(
+    () => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'],
+    [],
+  );
+  const pageViews = useMemo(() => [2400, 1398, null, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, null, 2780, 1890, 2390, 3490], []);
+
+  const chartAccessibilityLabel = `Website visitors across ${pages.length} pages. Some data points are missing.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      const pv = pageViews[index];
+      const uv = uniqueVisitors[index];
+      const pvStr = pv != null ? pv : 'no data';
+      const uvStr = uv != null ? uv : 'no data';
+      return `${pages[index]}: ${pvStr} views, ${uvStr} unique visitors.`;
+    },
+    [pages, pageViews, uniqueVisitors],
+  );
 
   const numberFormatter = useCallback(
     (value: number) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value),
@@ -241,6 +284,8 @@ function MissingData() {
       showArea
       showXAxis
       showYAxis
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
       height={200}
       // You can render points at every valid data point by always returning true
       points
@@ -325,9 +370,16 @@ LineChart uses `linear` scaling on axes by default, but you can also use other t
 
 Charts have built in functionality enabled through scrubbing, which can be used by setting `enableScrubbing` to true. You can listen to value changes through `onScrubberPositionChange`. Adding `Scrubber` to LineChart showcases the current scrubber position.
 
-```jsx
+```tsx
 function Interaction() {
   const [scrubberPosition, setScrubberPosition] = useState<number | undefined>();
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+
+  const chartAccessibilityLabel = `Price chart with ${data.length} data points. Swipe to navigate.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => `Point ${index + 1}: ${data[index]}`,
+    [data],
+  );
 
   return (
     <VStack gap={2}>
@@ -339,14 +391,11 @@ function Interaction() {
       <LineChart
         enableScrubbing
         showArea
+        accessibilityLabel={chartAccessibilityLabel}
+        getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
         height={200}
         onScrubberPositionChange={setScrubberPosition}
-        series={[
-          {
-            id: 'prices',
-            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-          },
-        ]}
+        series={[{ id: 'prices', data }]}
       >
         <Scrubber />
       </LineChart>
@@ -538,11 +587,28 @@ const PerformanceChart = memo(
       [formatDate, sparklineTimePeriodDataTimestamps],
     );
 
+    const chartAccessibilityLabel = `Bitcoin price chart with high, actual, and low series. ${sparklineTimePeriodDataValues.length} data points. Swipe to navigate.`;
+    const getScrubberAccessibilityLabel = useCallback(
+      (index: number) => {
+        const price = formatPriceThousands(sparklineTimePeriodDataValues[index]);
+        const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+        return `Point ${index + 1}: ${price}, ${date}`;
+      },
+      [
+        formatDate,
+        formatPriceThousands,
+        sparklineTimePeriodDataTimestamps,
+        sparklineTimePeriodDataValues,
+      ],
+    );
+
     return (
       <LineChart
         enableScrubbing
         showArea
         showYAxis
+        accessibilityLabel={chartAccessibilityLabel}
+        getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
         areaType="dotted"
         height={300}
         inset={{ top: 52, left: 0, right: 0 }}
@@ -585,6 +651,8 @@ By default, charts will not track gestures that go outside of the chart bounds.
 <LineChart
   enableScrubbing
   allowOverflowGestures
+  accessibilityLabel="Chart with overflow gestures. Swipe to navigate."
+  getScrubberAccessibilityLabel={(index) => `Point ${index + 1}`}
   ...
 >
   ...
@@ -614,42 +682,38 @@ Also, you can toggle animations by setting `animate` to `true` or `false`.
 
 ### Accessibility
 
-You can use `accessibilityLabel` on the chart to provide a descriptive label.
+Use `accessibilityLabel` on `LineChart` (or `CartesianChart`) to provide both:
+
+- a summary label when focus first lands on the chart
+- point-by-point labels while swiping through scrubber targets
+
+`getScrubberAccessibilityLabel` defines the per-segment text announced by screen readers. You do not need to add a `Scrubber` component for accessibility—`enableScrubbing` with `getScrubberAccessibilityLabel` is sufficient. BarChart and other charts work the same way.
 
 ```tsx
 function BasicAccessible() {
-  const [scrubberPosition, setScrubberPosition] = useState<number | undefined>();
   const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
 
-  // Chart-level accessibility label provides overview
-  const chartAccessibilityLabel = useMemo(() => {
-    const currentPrice = data[data.length - 1];
-    return `Price chart showing trend over ${data.length} data points. Current value: ${currentPrice}. Use arrow keys to adjust view`;
-  }, [data]);
-
-  // Scrubber-level accessibility label provides specific position info
-  const scrubberAccessibilityLabel = useCallback(
-    (index: number) => {
-      return `Price at position ${index + 1} of ${data.length}: ${data[index]}`;
-    },
+  // Chart-level accessibility label provides overview when focus lands on the chart
+  const chartAccessibilityLabel = useMemo(
+    () =>
+      `Price chart showing trend over ${data.length} data points. Current value: ${data[data.length - 1]}. Swipe to navigate.`,
     [data],
   );
 
-  const accessibilityLabel = useMemo(() => {
-    if (scrubberPosition !== undefined) {
-      return scrubberAccessibilityLabel(scrubberPosition);
-    }
-    return chartAccessibilityLabel;
-  }, [scrubberPosition, chartAccessibilityLabel, scrubberAccessibilityLabel]);
+  // Per-segment label announced when screen reader user taps or swipes to a segment
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => `Price at position ${index + 1} of ${data.length}: ${data[index]}`,
+    [data],
+  );
 
   return (
     <LineChart
       enableScrubbing
       showArea
       showYAxis
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
       height={200}
-      onScrubberPositionChange={setScrubberPosition}
       series={[
         {
           id: 'prices',
@@ -894,9 +958,17 @@ function GainLossChart() {
     />
   ));
 
+  const chartAccessibilityLabel = `Price chart with ${data.length} data points.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => `Point ${index + 1}: ${data[index]}`,
+    [data],
+  );
+
   return (
     <CartesianChart
       enableScrubbing
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
       height={200}
       series={[
         {
@@ -1005,30 +1077,35 @@ You can customize lines by placing props in `LineChart` or at each individual se
 
 You can also add instances of [ReferenceLine](/components/charts/ReferenceLine) to your LineChart to highlight a specific x or y value.
 
-```jsx
-<LineChart
-  enableScrubbing
-  showArea
-  height={200}
-  series={[
-    {
-      id: 'prices',
-      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-      color: theme.color.fgPositive,
-    },
-  ]}
-  xAxis={{
-    // Give space before the end of the chart for the scrubber
-    range: ({ min, max }) => ({ min, max: max - 24 }),
-  }}
->
-  <ReferenceLine
-    LineComponent={(props) => <DottedLine {...props} dashIntervals={[0, 16]} strokeWidth={3} />}
-    dataY={10}
-    stroke={theme.color.fg}
-  />
-  <Scrubber />
-</LineChart>
+```tsx
+function ReferenceLineExample() {
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+
+  const chartAccessibilityLabel = `Price chart with reference line at 10. ${data.length} data points.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => `Point ${index + 1}: ${data[index]}`,
+    [data],
+  );
+
+  return (
+    <LineChart
+      enableScrubbing
+      showArea
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
+      height={200}
+      series={[{ id: 'prices', data, color: theme.color.fgPositive }]}
+      xAxis={{ range: ({ min, max }) => ({ min, max: max - 24 }) }}
+    >
+      <ReferenceLine
+        LineComponent={(props) => <DottedLine {...props} dashIntervals={[0, 16]} strokeWidth={3} />}
+        dataY={10}
+        stroke={theme.color.fg}
+      />
+      <Scrubber />
+    </LineChart>
+  );
+}
 ```
 
 #### Points
@@ -1090,9 +1167,19 @@ You can have scrubber beacon's pulse by either adding `idlePulse` to Scrubber or
 ```tsx
 function StylingScrubber() {
   const theme = useTheme();
-  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
-  const pageViews = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
-  const uniqueVisitors = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
+  const pages = useMemo(
+    () => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'],
+    [],
+  );
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
+
+  const chartAccessibilityLabel = `Website visitors across ${pageViews.length} pages.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) =>
+      `${pages[index]}: ${pageViews[index]} views, ${uniqueVisitors[index]} unique visitors.`,
+    [pages, pageViews, uniqueVisitors],
+  );
 
   const numberFormatter = useCallback(
     (value: number) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value),
@@ -1105,6 +1192,8 @@ function StylingScrubber() {
       showArea
       showXAxis
       showYAxis
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
       height={200}
       series={[
         {
@@ -1364,6 +1453,21 @@ function AssetPriceWithDottedArea() {
       return `${dayOfWeek}, ${monthDay}, ${time}`;
     }, []);
 
+    const chartAccessibilityLabel = useMemo(
+      () =>
+        `Bitcoin price chart for ${timePeriod.label} period. Current price: ${formatPrice(currentPrice)}. Swipe to navigate.`,
+      [currentPrice, formatPrice, timePeriod.label],
+    );
+
+    const getScrubberAccessibilityLabel = useCallback(
+      (index: number) => {
+        const price = formatPrice(sparklineTimePeriodDataValues[index]);
+        const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
+        return `${price} ${date}`;
+      },
+      [formatDate, formatPrice, sparklineTimePeriodDataTimestamps, sparklineTimePeriodDataValues],
+    );
+
     return (
       <VStack gap={2}>
         <SectionHeader
@@ -1378,6 +1482,8 @@ function AssetPriceWithDottedArea() {
         <LineChart
           enableScrubbing
           showArea
+          accessibilityLabel={chartAccessibilityLabel}
+          getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
           areaType="dotted"
           height={200}
           inset={{ top: 52 }}
@@ -1573,10 +1679,22 @@ function MonotoneAssetPrice() {
     [theme.color.fg, theme.color.bg],
   );
 
+  const chartAccessibilityLabel = `Price chart with ${prices.length} data points. Swipe to navigate.`;
+  const getScrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      const price = scrubberPriceFormatter.format(prices[index].value);
+      const date = formatDate(prices[index].date);
+      return `${price} USD ${date}`;
+    },
+    [formatDate, prices, scrubberPriceFormatter],
+  );
+
   return (
     <LineChart
       enableScrubbing
       showYAxis
+      accessibilityLabel={chartAccessibilityLabel}
+      getScrubberAccessibilityLabel={getScrubberAccessibilityLabel}
       height={200}
       inset={{ top: 64 }}
       series={[
@@ -1878,6 +1996,7 @@ function ForecastAssetPrice() {
 | `fontSize` | `FontSize \| inherit` | No | `-` | - |
 | `fontWeight` | `inherit \| FontWeight` | No | `-` | - |
 | `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `getScrubberAccessibilityLabel` | `((dataIndex: number) => string)` | No | `-` | Function that returns the accessibility label for each scrubber point. Receives dataIndex for each scrubber point label. |
 | `height` | `string \| number` | No | `-` | - |
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly` | No | `-` | - |
@@ -1927,6 +2046,7 @@ function ForecastAssetPrice() {
 | `ref` | `((instance: View \| null) => void) \| RefObject<View> \| null` | No | `-` | - |
 | `right` | `string \| number` | No | `-` | - |
 | `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `scrubberAccessibilityLabelStep` | `number` | No | `Computed from data length (targeting 10 samples)` | Number of data points to move between screen-reader samples. |
 | `series` | `LineSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series supports Line component props for individual customization. |
 | `showArea` | `boolean` | No | `-` | Whether to show area fill under the line. |
 | `showXAxis` | `boolean` | No | `-` | Whether to show the X axis. |