@coinbase/cds-mcp-server 8.52.0 → 8.52.1

package/mcp-docs/web/components/AreaChart.txt

@@ -144,11 +144,7 @@ You can have different area styles for each series.
 
 ### Animations
 
-You can configure chart transitions using the `transitions` prop.
-
-#### Customized Transitions
-
-You can pass in a custom spring based transition to your `AreaChart` for a custom update transition.
+You can configure chart transitions using the `transitions` prop. Also, you can toggle animations by setting `animate` to `true` or `false`.
 
 ```jsx live
 function AnimatedStackedAreas() {
@@ -209,7 +205,7 @@ function AnimatedStackedAreas() {
     <DottedArea {...props} baselineOpacity={1} peakOpacity={1} />
   ));
 
-  function AnimatedChart() {
+  function AnimatedChart(props) {
     const [data, setData] = useState(generateInitialData);
 
     useEffect(() => {
@@ -253,125 +249,36 @@ function AnimatedStackedAreas() {
           tickLabelFormatter: () => '',
           domain: { min: 0, max: domainLimit },
         }}
+        {...props}
       />
     );
   }
 
-  return <AnimatedChart />;
-}
-```
-
-#### Disable Animations
-
-You can also disable animations by setting the `animate` prop to `false`.
-
-```jsx live
-function AnimatedStackedAreas() {
-  const dataCount = 20;
-  const minYValue = 5000;
-  const maxDataOffset = 15000;
-  const minStepOffset = 2500;
-  const maxStepOffset = 10000;
-  const updateInterval = 500;
-  const seriesSpacing = 2000;
-  const myTransition = { type: 'spring', stiffness: 700, damping: 20 };
-
-  const seriesConfig = [
-    { id: 'red', label: 'Red', color: 'rgb(var(--red40))' },
-    { id: 'orange', label: 'Orange', color: 'rgb(var(--orange40))' },
-    { id: 'yellow', label: 'Yellow', color: 'rgb(var(--yellow40))' },
-    { id: 'green', label: 'Green', color: 'rgb(var(--green40))' },
-    { id: 'blue', label: 'Blue', color: 'rgb(var(--blue40))' },
-    { id: 'indigo', label: 'Indigo', color: 'rgb(var(--indigo40))' },
-    { id: 'purple', label: 'Purple', color: 'rgb(var(--purple40))' },
-  ];
-
-  const domainLimit = maxDataOffset + seriesConfig.length * seriesSpacing;
-
-  function generateNextValue(previousValue) {
-    const range = maxStepOffset - minStepOffset;
-    const offset = Math.random() * range + minStepOffset;
-
-    let direction;
-    if (previousValue >= maxDataOffset) {
-      direction = -1;
-    } else if (previousValue <= minYValue) {
-      direction = 1;
-    } else {
-      direction = Math.random() < 0.5 ? -1 : 1;
-    }
-
-    let newValue = previousValue + offset * direction;
-    newValue = Math.max(minYValue, Math.min(maxDataOffset, newValue));
-    return newValue;
-  }
-
-  function generateInitialData() {
-    const data = [];
-
-    let previousValue = minYValue + Math.random() * (maxDataOffset - minYValue);
-    data.push(previousValue);
-
-    for (let i = 1; i < dataCount; i++) {
-      const newValue = generateNextValue(previousValue);
-      data.push(newValue);
-      previousValue = newValue;
-    }
-
-    return data;
-  }
-
-  const MemoizedDottedArea = memo((props) => (
-    <DottedArea {...props} baselineOpacity={1} peakOpacity={1} />
-  ));
-
-  function AnimatedChart() {
-    const [data, setData] = useState(generateInitialData);
-
-    useEffect(() => {
-      const intervalId = setInterval(() => {
-        setData((currentData) => {
-          const lastValue = currentData[currentData.length - 1] ?? 0;
-          const newValue = generateNextValue(lastValue);
-
-          return [...currentData.slice(1), newValue];
-        });
-      }, updateInterval);
-
-      return () => clearInterval(intervalId);
-    }, []);
-
-    const series = seriesConfig.map((config, index) => ({
-      id: config.id,
-      label: config.label,
-      color: config.color,
-      // First series gets animated data, others get constant height
-      data: index === 0 ? data : Array(dataCount).fill(seriesSpacing),
-    }));
+  function AnimatedChartExample() {
+    const animatedStates = [
+      { id: 'on', label: 'On' },
+      { id: 'off', label: 'Off' },
+    ];
+    const [animatedState, setAnimatedState] = useState(animatedStates[0]);
 
     return (
-      <AreaChart
-        animate={false}
-        overflow="visible"
-        stacked
-        height={{ base: 200, tablet: 250, desktop: 300 }}
-        series={series}
-        type="dotted"
-        showLines
-        AreaComponent={MemoizedDottedArea}
-        inset={0}
-        showYAxis
-        yAxis={{
-          showGrid: true,
-          width: 0,
-          tickLabelFormatter: () => '',
-          domain: { min: 0, max: domainLimit },
-        }}
-      />
+      <VStack gap={2}>
+        <HStack justifyContent="flex-end" gap={2} alignItems="center">
+          <Text as="h3" font="headline">
+            Animations
+          </Text>
+          <SegmentedTabs
+            activeTab={animatedState}
+            onChange={setAnimatedState}
+            tabs={animatedStates}
+          />
+        </HStack>
+        <AnimatedChart animate={animatedState.id === 'on'} />
+      </VStack>
     );
   }
 
-  return <AnimatedChart />;
+  return <AnimatedChartExample />;
 }
 ```
 
@@ -678,6 +585,7 @@ function XAxisGradient() {
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
+| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
 | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
 | `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
 | `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
@@ -731,8 +639,8 @@ function XAxisGradient() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

package/mcp-docs/web/components/BarChart.txt

@@ -10,7 +10,7 @@ import { BarChart } from '@coinbase/cds-web-visualization'
 
 ## Examples
 
-### Basic Example
+### Basics
 
 Bar charts are a useful component for comparing discrete categories of data.
 They are helpful for highlighting trends to users or allowing them to compare proportions at a glance.
@@ -34,6 +34,61 @@ To start, pass in a series of data to the chart.
 />
 ```
 
+### Horizontal Bars
+
+To show horizontal bars, set `layout` to `"horizontal"`. In this layout, the Y axis becomes the categorical axis and the X axis becomes the value axis.
+
+```jsx live
+function HorizontalBars() {
+  const dataset = [
+    { month: 'Jan', seoul: 21 },
+    { month: 'Feb', seoul: 28 },
+    { month: 'Mar', seoul: 41 },
+    { month: 'Apr', seoul: 73 },
+    { month: 'May', seoul: 99 },
+    { month: 'June', seoul: 144 },
+    { month: 'July', seoul: 319 },
+    { month: 'Aug', seoul: 249 },
+    { month: 'Sept', seoul: 131 },
+    { month: 'Oct', seoul: 55 },
+    { month: 'Nov', seoul: 48 },
+    { month: 'Dec', seoul: 25 },
+  ];
+
+  return (
+    <BarChart
+      height={400}
+      layout="horizontal"
+      series={[
+        {
+          id: 'seoul',
+          label: 'Seoul rainfall',
+          data: dataset.map((d) => d.seoul),
+          color: 'var(--color-accentBoldBlue)',
+        },
+      ]}
+      borderRadius={2}
+      showXAxis
+      showYAxis
+      xAxis={{
+        label: 'rainfall (mm)',
+        GridLineComponent: (props) => <SolidLine {...props} strokeWidth={1} />,
+        showGrid: true,
+        showLine: true,
+        showTickMarks: true,
+      }}
+      yAxis={{
+        position: 'left',
+        data: dataset.map((d) => d.month),
+        showLine: true,
+        showTickMarks: true,
+        bandTickMarkPlacement: 'edges',
+      }}
+    />
+  );
+}
+```
+
 ### Multiple Series
 
 You can also provide multiple series of data to the chart. Series will have their bars for each data point rendered side by side.
@@ -293,7 +348,7 @@ function MonthlyGainsByAsset() {
 
 ### Border Radius
 
-Bars have a default border radius of `100`. You can change this by setting the `borderRadius` prop on the chart.
+Bars have a default `borderRadius` of `4`. You can change this by setting the `borderRadius` prop on the chart.
 
 Stacks will only round the top corners of touching bars.
 
@@ -640,7 +695,7 @@ You can also set the `barMinSize` prop to control the minimum size for individua
 />
 ```
 
-#### Multiple Y Axes
+#### Multiple Axes
 
 You can render bars from separate y axes in one `BarPlot`, however they aren't able to be stacked.
 
@@ -704,6 +759,69 @@ You can render bars from separate y axes in one `BarPlot`, however they aren't a
 </CartesianChart>
 ```
 
+When using horizontal layout, you can use multiple x axes.
+
+```jsx live
+<CartesianChart
+  layout="horizontal"
+  legend
+  height={400}
+  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+  legendPosition="bottom"
+  series={[
+    {
+      id: 'revenue',
+      label: 'Revenue ($)',
+      data: [455, 520, 380, 455, 285, 235],
+      xAxisId: 'revenue',
+      color: 'var(--color-accentBoldYellow)',
+    },
+    {
+      id: 'profitMargin',
+      label: 'Profit Margin (%)',
+      data: [23, 20, 16, 38, 12, 9],
+      xAxisId: 'profitMargin',
+      color: 'var(--color-fgPositive)',
+    },
+  ]}
+  xAxis={[
+    {
+      id: 'revenue',
+      domain: { min: 0 },
+    },
+    {
+      id: 'profitMargin',
+      domain: { min: 0, max: 100 },
+    },
+  ]}
+  yAxis={{
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    scaleType: 'band',
+  }}
+>
+  <YAxis showLine showTickMarks position="left" />
+  <XAxis
+    showGrid
+    showLine
+    showTickMarks
+    axisId="revenue"
+    position="top"
+    requestedTickCount={5}
+    height={60}
+    tickLabelFormatter={(value) => `$${value}k`}
+  />
+  <XAxis
+    showLine
+    showTickMarks
+    axisId="profitMargin"
+    position="bottom"
+    requestedTickCount={5}
+    tickLabelFormatter={(value) => `${value}%`}
+  />
+  <BarPlot />
+</CartesianChart>
+```
+
 #### Custom Components
 
 ##### Outlined Stacks
@@ -770,11 +888,7 @@ function MonthlyRewards() {
 
 ### Animations
 
-You can configure chart transitions using the `transitions` prop.
-
-#### Customized Transitions
-
-You can pass in a custom spring based transition to your `BarChart` for a custom update transition.
+You can configure chart transitions using the `transitions` prop. Also, you can toggle animations by setting `animate` to `true` or `false`.
 
 ```jsx live
 function AnimatedStackedBars() {
@@ -831,7 +945,7 @@ function AnimatedStackedBars() {
     return data;
   }
 
-  function AnimatedChart() {
+  function AnimatedChart(props) {
     const [data, setData] = useState(generateInitialData);
 
     useEffect(() => {
@@ -871,115 +985,36 @@ function AnimatedStackedBars() {
           tickLabelFormatter: () => '',
           domain: { min: 0, max: domainLimit },
         }}
+        {...props}
       />
     );
   }
 
-  return <AnimatedChart />;
-}
-```
-
-#### Disable Animations
-
-You can also disable animations by setting the `animate` prop to `false`.
-
-```jsx live
-function AnimatedStackedBars() {
-  const dataCount = 12;
-  const minValue = 20;
-  const maxValue = 100;
-  const minStep = 10;
-  const maxStep = 40;
-  const updateInterval = 600;
-  const seriesSpacing = 30;
-
-  const seriesConfig = [
-    { id: 'red', label: 'Red', color: 'rgb(var(--red40))' },
-    { id: 'orange', label: 'Orange', color: 'rgb(var(--orange40))' },
-    { id: 'yellow', label: 'Yellow', color: 'rgb(var(--yellow40))' },
-    { id: 'green', label: 'Green', color: 'rgb(var(--green40))' },
-    { id: 'blue', label: 'Blue', color: 'rgb(var(--blue40))' },
-    { id: 'indigo', label: 'Indigo', color: 'rgb(var(--indigo40))' },
-    { id: 'purple', label: 'Purple', color: 'rgb(var(--purple40))' },
-  ];
-
-  const domainLimit = maxValue + seriesConfig.length * seriesSpacing;
-
-  function generateNextValue(previousValue) {
-    const range = maxStep - minStep;
-    const offset = Math.random() * range + minStep;
-
-    let direction;
-    if (previousValue >= maxValue) {
-      direction = -1;
-    } else if (previousValue <= minValue) {
-      direction = 1;
-    } else {
-      direction = Math.random() < 0.5 ? -1 : 1;
-    }
-
-    let newValue = previousValue + offset * direction;
-    newValue = Math.max(minValue, Math.min(maxValue, newValue));
-    return newValue;
-  }
-
-  function generateInitialData() {
-    const data = [];
-
-    let previousValue = minValue + Math.random() * (maxValue - minValue);
-    data.push(previousValue);
-
-    for (let i = 1; i < dataCount; i++) {
-      const newValue = generateNextValue(previousValue);
-      data.push(newValue);
-      previousValue = newValue;
-    }
-
-    return data;
-  }
-
-  function AnimatedChart() {
-    const [data, setData] = useState(generateInitialData);
-
-    useEffect(() => {
-      const intervalId = setInterval(() => {
-        setData((currentData) => {
-          const lastValue = currentData[currentData.length - 1] ?? minValue;
-          const newValue = generateNextValue(lastValue);
-
-          return [...currentData.slice(1), newValue];
-        });
-      }, updateInterval);
-
-      return () => clearInterval(intervalId);
-    }, []);
-
-    const series = seriesConfig.map((config, index) => ({
-      id: config.id,
-      label: config.label,
-      color: config.color,
-      data: index === 0 ? data : Array(dataCount).fill(seriesSpacing),
-    }));
+  function AnimatedChartExample() {
+    const animatedStates = [
+      { id: 'on', label: 'On' },
+      { id: 'off', label: 'Off' },
+    ];
+    const [animatedState, setAnimatedState] = useState(animatedStates[0]);
 
     return (
-      <BarChart
-        animate={false}
-        stacked
-        height={{ base: 200, tablet: 250, desktop: 300 }}
-        series={series}
-        inset={0}
-        showYAxis
-        yAxis={{
-          showGrid: true,
-          width: 0,
-          tickLabelFormatter: () => '',
-          domain: { min: 0, max: domainLimit },
-        }}
-      />
+      <VStack gap={2}>
+        <HStack justifyContent="flex-end" gap={2} alignItems="center">
+          <Text as="h3" font="headline">
+            Animations
+          </Text>
+          <SegmentedTabs
+            activeTab={animatedState}
+            onChange={setAnimatedState}
+            tabs={animatedStates}
+          />
+        </HStack>
+        <AnimatedChart animate={animatedState.id === 'on'} />
+      </VStack>
     );
   }
 
-  return <AnimatedChart />;
+  return <AnimatedChartExample />;
 }
 ```
 
@@ -1273,6 +1308,86 @@ function SunlightChartExample() {
 }
 ```
 
+#### Buy vs Sell
+
+You can combine a horizontal BarChart with a custom legend to create a buy vs sell chart.
+
+```tsx live
+function BuyVsSellExample() {
+  function BuyVsSellLegend({ buy, sell }: { buy: number; sell: number }) {
+    return (
+      <HStack gap={1} justifyContent="space-between">
+        <DefaultLegendEntry
+          label={
+            <Text font="legal" color="fgMuted">
+              {buy}% bought
+            </Text>
+          }
+          color="var(--color-fgPositive)"
+        />
+        <DefaultLegendEntry
+          label={
+            <Text font="legal" color="fgMuted">
+              {sell}% sold
+            </Text>
+          }
+          color="var(--color-fgNegative)"
+        />
+      </HStack>
+    );
+  }
+
+  function BuyVsSellChart({
+    buy,
+    sell,
+    animate = false,
+    borderRadius = 3,
+    height = 6,
+    inset = 0,
+    layout = 'horizontal',
+    stackGap = 4,
+    xAxis,
+    yAxis,
+    ...props
+  }: Omit<BarChartProps, 'series'> & { buy: number; sell: number }) {
+    return (
+      <VStack gap={1.5}>
+        <BarChart
+          animate={animate}
+          roundBaseline
+          stacked
+          borderRadius={borderRadius}
+          height={height}
+          inset={inset}
+          layout={layout}
+          series={[
+            {
+              id: 'buy',
+              data: [buy],
+              color: 'var(--color-fgPositive)',
+              legendShape: 'circle',
+            },
+            {
+              id: 'sell',
+              data: [sell],
+              color: 'var(--color-fgNegative)',
+              legendShape: 'circle',
+            },
+          ]}
+          stackGap={stackGap}
+          xAxis={{ domainLimit: 'strict', ...xAxis }}
+          yAxis={{ categoryPadding: 0, ...yAxis }}
+          {...props}
+        />
+        <BuyVsSellLegend buy={buy} sell={sell} />
+      </VStack>
+    );
+  }
+
+  return <BuyVsSellChart buy={76} sell={24} />;
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
@@ -1288,15 +1403,11 @@ function SunlightChartExample() {
 | `background` | `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 | `-` | - |
 | `barMinSize` | `number` | No | `-` | Minimum size for individual bars in the stack. |
 | `barPadding` | `number` | No | `0.1` | Padding between bar groups (0-1). |
-| `borderBottomLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
-| `borderBottomRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderBottomWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `borderColor` | `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 | `-` | - |
 | `borderEndWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
-| `borderRadius` | `((BorderRadius \| { base?: BorderRadius; phone?: BorderRadius \| undefined; tablet?: BorderRadius \| undefined; desktop?: BorderRadius \| undefined; }) & number) \| undefined` | No | `4` | Border radius for the bar. |
+| `borderRadius` | `number` | No | `4` | Border radius for the bar. |
 | `borderStartWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
-| `borderTopLeftRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
-| `borderTopRightRadius` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
 | `borderTopWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
 | `bordered` | `boolean` | No | `-` | Add a border around all sides of the box. |
@@ -1344,6 +1455,7 @@ function SunlightChartExample() {
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
+| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
 | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
 | `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
 | `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
@@ -1398,8 +1510,8 @@ function SunlightChartExample() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `(Partial<AxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
-| `yAxis` | `(Partial<AxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `xAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<CartesianAxisConfigProps> & SharedProps & { bandGridLinePlacement?: AxisBandPlacement; bandTickMarkPlacement?: AxisBandPlacement \| undefined; label?: string \| undefined; labelGap?: number \| undefined; minTickLabelGap?: number \| undefined; requestedTickCount?: number \| undefined; showGrid?: boolean \| undefined; showLine?: boolean \| undefined; showTickMarks?: boolean \| undefined; tickMarkSize?: number \| undefined; ticks?: number[] \| ((value: number) => boolean) \| undefined; tickMarkLabelGap?: number \| undefined; tickInterval?: number \| undefined; tickMinStep?: number \| undefined; tickMaxStep?: number \| undefined; } & { className?: string \| undefined; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 
 

package/mcp-docs/web/components/CartesianChart.txt

@@ -232,7 +232,9 @@ You can provide a `stackId` to stack series together.
 
 ### Axes
 
-You can configure your x and y axes with the `xAxis` and `yAxis` props. `xAxis` accepts an object while `yAxis` accepts an object or array.
+You can configure your x and y axes with the `xAxis` and `yAxis` props. `xAxis` accepts an object or array, while `yAxis` accepts an object or array.
+
+When `layout="horizontal"`, you can define multiple x-axes (for multiple value scales) but only one y-axis.
 
 ```jsx live
 <CartesianChart
@@ -1035,6 +1037,7 @@ function TradingTrends() {
 | `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
 | `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | No | `-` | - |
 | `key` | `Key \| null` | No | `-` | - |
+| `layout` | `horizontal \| vertical` | No | `'vertical'` | Chart layout - describes the direction bars/areas grow. - vertical (default): Bars grow vertically. X is category axis, Y is value axis. - horizontal: Bars grow horizontally. Y is category axis, X is value axis. |
 | `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
 | `legend` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Whether to show the legend or a custom legend element. - true renders the default Legend component - A React element renders that element as the legend - false or omitted hides the legend |
 | `legendAccessibilityLabel` | `string` | No | `'Legend'` | Accessibility label for the legend group. |
@@ -1079,8 +1082,8 @@ function TradingTrends() {
 | `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
 | `visibility` | `ResponsiveProp<hidden \| visible>` | No | `-` | - |
 | `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
-| `xAxis` | `Partial<Omit<AxisConfigProps, id>>` | No | `-` | Configuration for x-axis. |
-| `yAxis` | `Partial<Omit<AxisConfigProps, data>> \| Partial<Omit<AxisConfigProps, data>>[]` | No | `-` | Configuration for y-axis(es). Can be a single config or array of configs. |
+| `xAxis` | `Partial<CartesianAxisConfigProps> \| Partial<CartesianAxisConfigProps>[]` | No | `-` | Configuration for x-axis(es). Can be a single config or array of configs. |
+| `yAxis` | `Partial<Omit<CartesianAxisConfigProps, data>> \| Partial<Omit<CartesianAxisConfigProps, data>>[]` | No | `-` | Configuration for y-axis(es). Can be a single config or array of configs. |
 | `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |