@coinbase/cds-mcp-server 8.17.2 → 8.17.3

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

@@ -0,0 +1,1045 @@
+# CartesianChart
+
+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.
+
+## Import
+
+```jsx
+import { CartesianChart } from '@coinbase/cds-web-visualization'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `accentHeight` | `string \| number` | No | `-` | - |
+| `accumulate` | `none \| sum` | No | `-` | - |
+| `additive` | `sum \| replace` | No | `-` | - |
+| `alignContent` | `ResponsiveProp<center \| end \| normal \| start \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| end \| normal \| start \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| end \| normal \| auto \| start \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | No | `-` | - |
+| `alignmentBaseline` | `alphabetic \| hanging \| ideographic \| mathematical \| inherit \| auto \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge` | No | `-` | - |
+| `allowReorder` | `no \| yes` | No | `-` | - |
+| `alphabetic` | `string \| number` | No | `-` | - |
+| `amplitude` | `string \| number` | No | `-` | - |
+| `animate` | `boolean` | No | `true` | Whether to animate the chart. |
+| `arabicForm` | `initial \| medial \| terminal \| isolated` | No | `-` | - |
+| `as` | `svg` | No | `-` | - |
+| `ascent` | `string \| number` | No | `-` | - |
+| `aspectRatio` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `attributeName` | `string` | No | `-` | - |
+| `attributeType` | `string` | No | `-` | - |
+| `autoReverse` | `false \| true \| true \| false` | No | `-` | - |
+| `azimuth` | `string \| number` | No | `-` | - |
+| `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 | `-` | - |
+| `baseFrequency` | `string \| number` | No | `-` | - |
+| `baseProfile` | `string \| number` | No | `-` | - |
+| `baselineShift` | `string \| number` | No | `-` | - |
+| `bbox` | `string \| number` | No | `-` | - |
+| `begin` | `string \| number` | No | `-` | - |
+| `bias` | `string \| number` | No | `-` | - |
+| `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` | `0 \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900 \| 1000` | No | `-` | - |
+| `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. |
+| `borderedBottom` | `boolean` | No | `-` | Add a border to the bottom side of the box. |
+| `borderedEnd` | `boolean` | No | `-` | Add a border to the trailing side of the box. |
+| `borderedHorizontal` | `boolean` | No | `-` | Add a border to the leading and trailing sides of the box. |
+| `borderedStart` | `boolean` | No | `-` | Add a border to the leading side of the box. |
+| `borderedTop` | `boolean` | No | `-` | Add a border to the top side of the box. |
+| `borderedVertical` | `boolean` | No | `-` | Add a border to the top and bottom sides of the box. |
+| `bottom` | `ResponsiveProp<Bottom<string \| number>>` | No | `-` | - |
+| `by` | `string \| number` | No | `-` | - |
+| `calcMode` | `string \| number` | No | `-` | - |
+| `capHeight` | `string \| number` | No | `-` | - |
+| `className` | `string` | No | `-` | - |
+| `clip` | `string \| number` | No | `-` | - |
+| `clipPath` | `string` | No | `-` | - |
+| `clipPathUnits` | `string \| number` | No | `-` | - |
+| `clipRule` | `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 | `-` | - |
+| `colorInterpolation` | `string \| number` | No | `-` | - |
+| `colorInterpolationFilters` | `inherit \| auto \| sRGB \| linearRGB` | No | `-` | - |
+| `colorProfile` | `string \| number` | No | `-` | - |
+| `colorRendering` | `string \| number` | No | `-` | - |
+| `columnGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `contentScriptType` | `string \| number` | No | `-` | - |
+| `contentStyleType` | `string \| number` | No | `-` | - |
+| `crossOrigin` | ` \| anonymous \| use-credentials` | No | `-` | - |
+| `cursor` | `string \| number` | No | `-` | - |
+| `cx` | `string \| number` | No | `-` | - |
+| `cy` | `string \| number` | No | `-` | - |
+| `d` | `string` | No | `-` | - |
+| `dangerouslySetBackground` | `string` | No | `-` | - |
+| `decelerate` | `string \| number` | No | `-` | - |
+| `descent` | `string \| number` | No | `-` | - |
+| `diffuseConstant` | `string \| number` | No | `-` | - |
+| `direction` | `string \| number` | No | `-` | - |
+| `display` | `ResponsiveProp<grid \| revert \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| list-item>` | No | `-` | - |
+| `divisor` | `string \| number` | No | `-` | - |
+| `dominantBaseline` | `string \| number` | No | `-` | - |
+| `dur` | `string \| number` | No | `-` | - |
+| `dx` | `string \| number` | No | `-` | - |
+| `dy` | `string \| number` | No | `-` | - |
+| `edgeMode` | `string \| number` | No | `-` | - |
+| `elevation` | `0 \| 1 \| 2` | No | `-` | - |
+| `enableBackground` | `string \| number` | No | `-` | - |
+| `enableScrubbing` | `boolean` | No | `-` | Enables scrubbing interactions. When true, allows scrubbing and makes scrubber components interactive. |
+| `end` | `string \| number` | No | `-` | - |
+| `exponent` | `string \| number` | No | `-` | - |
+| `externalResourcesRequired` | `false \| true \| true \| false` | No | `-` | - |
+| `fill` | `string` | No | `-` | - |
+| `fillOpacity` | `string \| number` | No | `-` | - |
+| `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
+| `filter` | `string` | No | `-` | - |
+| `filterRes` | `string \| number` | No | `-` | - |
+| `filterUnits` | `string \| number` | No | `-` | - |
+| `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
+| `flexDirection` | `ResponsiveProp<row \| row-reverse \| column \| column-reverse>` | No | `-` | - |
+| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `flexWrap` | `ResponsiveProp<nowrap \| wrap \| wrap-reverse>` | No | `-` | - |
+| `floodColor` | `string \| number` | No | `-` | - |
+| `floodOpacity` | `string \| number` | No | `-` | - |
+| `focusable` | `auto \| Booleanish` | No | `-` | - |
+| `font` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontFamily` | `ResponsiveProp<FontFamily \| inherit>` | No | `-` | - |
+| `fontSize` | `ResponsiveProp<FontSize \| inherit>` | No | `-` | - |
+| `fontSizeAdjust` | `string \| number` | No | `-` | - |
+| `fontStretch` | `string \| number` | No | `-` | - |
+| `fontStyle` | `string \| number` | No | `-` | - |
+| `fontVariant` | `string \| number` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<FontWeight \| inherit>` | No | `-` | - |
+| `format` | `string \| number` | No | `-` | - |
+| `fr` | `string \| number` | No | `-` | - |
+| `from` | `string \| number` | No | `-` | - |
+| `fx` | `string \| number` | No | `-` | - |
+| `fy` | `string \| number` | No | `-` | - |
+| `g1` | `string \| number` | No | `-` | - |
+| `g2` | `string \| number` | No | `-` | - |
+| `gap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `glyphName` | `string \| number` | No | `-` | - |
+| `glyphOrientationHorizontal` | `string \| number` | No | `-` | - |
+| `glyphOrientationVertical` | `string \| number` | No | `-` | - |
+| `glyphRef` | `string \| number` | No | `-` | - |
+| `gradientTransform` | `string` | No | `-` | - |
+| `gradientUnits` | `string` | No | `-` | - |
+| `grid` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridArea` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
+| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoRows` | `ResponsiveProp<GridAutoRows<string \| number>>` | No | `-` | - |
+| `gridColumn` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridColumnStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowEnd` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridRowStart` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `gridTemplate` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateAreas` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `gridTemplateColumns` | `ResponsiveProp<GridTemplateColumns<string \| number>>` | No | `-` | - |
+| `gridTemplateRows` | `ResponsiveProp<GridTemplateRows<string \| number>>` | No | `-` | - |
+| `hanging` | `string \| number` | No | `-` | - |
+| `height` | `ResponsiveProp<Height<string \| number>>` | No | `-` | - |
+| `horizAdvX` | `string \| number` | No | `-` | - |
+| `horizOriginX` | `string \| number` | No | `-` | - |
+| `href` | `string` | No | `-` | - |
+| `id` | `string` | No | `-` | - |
+| `ideographic` | `string \| number` | No | `-` | - |
+| `imageRendering` | `string \| number` | No | `-` | - |
+| `in` | `string` | No | `-` | - |
+| `in2` | `string \| number` | No | `-` | - |
+| `inset` | `number \| Partial<ChartInset>` | No | `-` | Inset around the entire chart (outside the axes). |
+| `intercept` | `string \| number` | No | `-` | - |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| end \| normal \| start \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | No | `-` | - |
+| `k` | `string \| number` | No | `-` | - |
+| `k1` | `string \| number` | No | `-` | - |
+| `k2` | `string \| number` | No | `-` | - |
+| `k3` | `string \| number` | No | `-` | - |
+| `k4` | `string \| number` | No | `-` | - |
+| `kernelMatrix` | `string \| number` | No | `-` | - |
+| `kernelUnitLength` | `string \| number` | No | `-` | - |
+| `kerning` | `string \| number` | No | `-` | - |
+| `key` | `Key \| null` | No | `-` | - |
+| `keyPoints` | `string \| number` | No | `-` | - |
+| `keySplines` | `string \| number` | No | `-` | - |
+| `keyTimes` | `string \| number` | No | `-` | - |
+| `lang` | `string` | No | `-` | - |
+| `left` | `ResponsiveProp<Left<string \| number>>` | No | `-` | - |
+| `lengthAdjust` | `string \| number` | No | `-` | - |
+| `letterSpacing` | `string \| number` | No | `-` | - |
+| `lightingColor` | `string \| number` | No | `-` | - |
+| `limitingConeAngle` | `string \| number` | No | `-` | - |
+| `lineHeight` | `ResponsiveProp<LineHeight \| inherit>` | No | `-` | - |
+| `local` | `string \| number` | No | `-` | - |
+| `margin` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -5 \| -10 \| -0.25 \| -0.5 \| -0.75 \| -1 \| -1.5 \| -2 \| -3 \| -4 \| -6 \| -7 \| -8 \| -9>` | No | `-` | - |
+| `markerEnd` | `string` | No | `-` | - |
+| `markerHeight` | `string \| number` | No | `-` | - |
+| `markerMid` | `string` | No | `-` | - |
+| `markerStart` | `string` | No | `-` | - |
+| `markerUnits` | `string \| number` | No | `-` | - |
+| `markerWidth` | `string \| number` | No | `-` | - |
+| `mask` | `string` | No | `-` | - |
+| `maskContentUnits` | `string \| number` | No | `-` | - |
+| `maskUnits` | `string \| number` | No | `-` | - |
+| `mathematical` | `string \| number` | No | `-` | - |
+| `max` | `string \| number` | No | `-` | - |
+| `maxHeight` | `ResponsiveProp<MaxHeight<string \| number>>` | No | `-` | - |
+| `maxWidth` | `ResponsiveProp<MaxWidth<string \| number>>` | No | `-` | - |
+| `media` | `string` | No | `-` | - |
+| `method` | `string` | No | `-` | - |
+| `min` | `string \| number` | No | `-` | - |
+| `minHeight` | `ResponsiveProp<MinHeight<string \| number>>` | No | `-` | - |
+| `minWidth` | `ResponsiveProp<MinWidth<string \| number>>` | No | `-` | - |
+| `mode` | `string \| number` | No | `-` | - |
+| `name` | `string` | No | `-` | - |
+| `numOctaves` | `string \| number` | No | `-` | - |
+| `offset` | `string \| number` | No | `-` | - |
+| `onChange` | `FormEventHandler<SVGSVGElement>` | No | `-` | - |
+| `onScrubberPositionChange` | `((index: number) => void) \| undefined` | No | `-` | Callback fired when the scrubber position changes. Receives the dataIndex of the scrubber or undefined when not scrubbing. |
+| `opacity` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `operator` | `string \| number` | No | `-` | - |
+| `order` | `string \| number` | No | `-` | - |
+| `orient` | `string \| number` | No | `-` | - |
+| `orientation` | `string \| number` | No | `-` | - |
+| `origin` | `string \| number` | No | `-` | - |
+| `overflow` | `ResponsiveProp<clip \| auto \| visible \| hidden \| scroll>` | No | `-` | - |
+| `overlinePosition` | `string \| number` | No | `-` | - |
+| `overlineThickness` | `string \| number` | No | `-` | - |
+| `padding` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingBottom` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingEnd` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingStart` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingTop` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingX` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paddingY` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `paintOrder` | `string \| number` | No | `-` | - |
+| `panose1` | `string \| number` | No | `-` | - |
+| `path` | `string` | No | `-` | - |
+| `pathLength` | `string \| number` | No | `-` | - |
+| `patternContentUnits` | `string` | No | `-` | - |
+| `patternTransform` | `string \| number` | No | `-` | - |
+| `patternUnits` | `string` | No | `-` | - |
+| `pin` | `top \| bottom \| left \| right \| all` | No | `-` | Direction in which to absolutely pin the box. |
+| `pointerEvents` | `string \| number` | No | `-` | - |
+| `points` | `string` | No | `-` | - |
+| `pointsAtX` | `string \| number` | No | `-` | - |
+| `pointsAtY` | `string \| number` | No | `-` | - |
+| `pointsAtZ` | `string \| number` | No | `-` | - |
+| `position` | `ResponsiveProp<static \| relative \| absolute \| fixed \| sticky>` | No | `-` | - |
+| `preserveAlpha` | `false \| true \| true \| false` | No | `-` | - |
+| `preserveAspectRatio` | `string` | No | `-` | - |
+| `primitiveUnits` | `string \| number` | No | `-` | - |
+| `r` | `string \| number` | No | `-` | - |
+| `radius` | `string \| number` | No | `-` | - |
+| `ref` | `((instance: SVGSVGElement \| null) => void) \| RefObject<SVGSVGElement> \| null` | No | `-` | - |
+| `refX` | `string \| number` | No | `-` | - |
+| `refY` | `string \| number` | No | `-` | - |
+| `renderingIntent` | `string \| number` | No | `-` | - |
+| `repeatCount` | `string \| number` | No | `-` | - |
+| `repeatDur` | `string \| number` | No | `-` | - |
+| `requiredExtensions` | `string \| number` | No | `-` | - |
+| `requiredFeatures` | `string \| number` | No | `-` | - |
+| `restart` | `string \| number` | No | `-` | - |
+| `result` | `string` | No | `-` | - |
+| `right` | `ResponsiveProp<Right<string \| number>>` | No | `-` | - |
+| `role` | `grid \| article \| button \| dialog \| figure \| form \| img \| link \| main \| menu \| menuitem \| option \| search \| table \| switch \| string & {} \| none \| row \| alert \| alertdialog \| application \| banner \| cell \| checkbox \| columnheader \| combobox \| complementary \| contentinfo \| definition \| directory \| document \| feed \| gridcell \| group \| heading \| list \| listbox \| listitem \| log \| marquee \| math \| menubar \| menuitemcheckbox \| menuitemradio \| navigation \| note \| presentation \| progressbar \| radio \| radiogroup \| region \| rowgroup \| rowheader \| scrollbar \| searchbox \| separator \| slider \| spinbutton \| status \| tab \| tablist \| tabpanel \| term \| textbox \| timer \| toolbar \| tooltip \| tree \| treegrid \| treeitem` | No | `-` | - |
+| `rotate` | `string \| number` | No | `-` | - |
+| `rowGap` | `0 \| 5 \| 10 \| 0.25 \| 0.5 \| 0.75 \| 1 \| 1.5 \| 2 \| 3 \| 4 \| 6 \| 7 \| 8 \| 9` | No | `-` | - |
+| `rx` | `string \| number` | No | `-` | - |
+| `ry` | `string \| number` | No | `-` | - |
+| `scale` | `string \| number` | No | `-` | - |
+| `seed` | `string \| number` | No | `-` | - |
+| `series` | `Series[]` | No | `-` | Configuration objects that define how to visualize the data. Each series contains its own data array. |
+| `shapeRendering` | `string \| number` | No | `-` | - |
+| `slope` | `string \| number` | No | `-` | - |
+| `spacing` | `string \| number` | No | `-` | - |
+| `specularConstant` | `string \| number` | No | `-` | - |
+| `specularExponent` | `string \| number` | No | `-` | - |
+| `speed` | `string \| number` | No | `-` | - |
+| `spreadMethod` | `string` | No | `-` | - |
+| `startOffset` | `string \| number` | No | `-` | - |
+| `stdDeviation` | `string \| number` | No | `-` | - |
+| `stemh` | `string \| number` | No | `-` | - |
+| `stemv` | `string \| number` | No | `-` | - |
+| `stitchTiles` | `string \| number` | No | `-` | - |
+| `stopColor` | `string` | No | `-` | - |
+| `stopOpacity` | `string \| number` | No | `-` | - |
+| `strikethroughPosition` | `string \| number` | No | `-` | - |
+| `strikethroughThickness` | `string \| number` | No | `-` | - |
+| `string` | `string \| number` | No | `-` | - |
+| `stroke` | `string` | No | `-` | - |
+| `strokeDasharray` | `string \| number` | No | `-` | - |
+| `strokeDashoffset` | `string \| number` | No | `-` | - |
+| `strokeLinecap` | `inherit \| butt \| round \| square` | No | `-` | - |
+| `strokeLinejoin` | `inherit \| round \| miter \| bevel` | No | `-` | - |
+| `strokeMiterlimit` | `string \| number` | No | `-` | - |
+| `strokeOpacity` | `string \| number` | No | `-` | - |
+| `strokeWidth` | `string \| number` | No | `-` | - |
+| `style` | `CSSProperties` | No | `-` | - |
+| `suppressHydrationWarning` | `boolean` | No | `-` | - |
+| `surfaceScale` | `string \| number` | No | `-` | - |
+| `systemLanguage` | `string \| number` | No | `-` | - |
+| `tabIndex` | `number` | No | `-` | - |
+| `tableValues` | `string \| number` | No | `-` | - |
+| `target` | `string` | No | `-` | - |
+| `targetX` | `string \| number` | No | `-` | - |
+| `targetY` | `string \| number` | No | `-` | - |
+| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |
+| `textAlign` | `ResponsiveProp<center \| end \| start \| justify>` | No | `-` | - |
+| `textAnchor` | `string` | No | `-` | - |
+| `textDecoration` | `ResponsiveProp<none \| underline \| overline \| line-through \| underline overline \| underline double>` | No | `-` | - |
+| `textLength` | `string \| number` | No | `-` | - |
+| `textRendering` | `string \| number` | No | `-` | - |
+| `textTransform` | `ResponsiveProp<capitalize \| lowercase \| none \| uppercase>` | No | `-` | - |
+| `to` | `string \| number` | No | `-` | - |
+| `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
+| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `type` | `string` | No | `-` | - |
+| `u1` | `string \| number` | No | `-` | - |
+| `u2` | `string \| number` | No | `-` | - |
+| `underlinePosition` | `string \| number` | No | `-` | - |
+| `underlineThickness` | `string \| number` | No | `-` | - |
+| `unicode` | `string \| number` | No | `-` | - |
+| `unicodeBidi` | `string \| number` | No | `-` | - |
+| `unicodeRange` | `string \| number` | No | `-` | - |
+| `unitsPerEm` | `string \| number` | No | `-` | - |
+| `userSelect` | `ResponsiveProp<text \| none \| auto \| all>` | No | `-` | - |
+| `vAlphabetic` | `string \| number` | No | `-` | - |
+| `vHanging` | `string \| number` | No | `-` | - |
+| `vIdeographic` | `string \| number` | No | `-` | - |
+| `vMathematical` | `string \| number` | No | `-` | - |
+| `values` | `string` | No | `-` | - |
+| `vectorEffect` | `string \| number` | No | `-` | - |
+| `version` | `string` | No | `-` | - |
+| `vertAdvY` | `string \| number` | No | `-` | - |
+| `vertOriginX` | `string \| number` | No | `-` | - |
+| `vertOriginY` | `string \| number` | No | `-` | - |
+| `viewBox` | `string` | No | `-` | - |
+| `viewTarget` | `string \| number` | No | `-` | - |
+| `visibility` | `ResponsiveProp<visible \| hidden>` | No | `-` | - |
+| `width` | `ResponsiveProp<Width<string \| number>>` | No | `-` | - |
+| `widths` | `string \| number` | No | `-` | - |
+| `wordSpacing` | `string \| number` | No | `-` | - |
+| `writingMode` | `string \| number` | No | `-` | - |
+| `x` | `string \| number` | No | `-` | - |
+| `x1` | `string \| number` | No | `-` | - |
+| `x2` | `string \| number` | No | `-` | - |
+| `xAxis` | `Partial<Omit<AxisConfigProps, id>>` | No | `-` | Configuration for x-axis. |
+| `xChannelSelector` | `string` | No | `-` | - |
+| `xHeight` | `string \| number` | No | `-` | - |
+| `xlinkActuate` | `string` | No | `-` | - |
+| `xlinkArcrole` | `string` | No | `-` | - |
+| `xlinkHref` | `string` | No | `-` | - |
+| `xlinkRole` | `string` | No | `-` | - |
+| `xlinkShow` | `string` | No | `-` | - |
+| `xlinkTitle` | `string` | No | `-` | - |
+| `xlinkType` | `string` | No | `-` | - |
+| `xmlBase` | `string` | No | `-` | - |
+| `xmlLang` | `string` | No | `-` | - |
+| `xmlSpace` | `string` | No | `-` | - |
+| `xmlns` | `string` | No | `-` | - |
+| `xmlnsXlink` | `string` | No | `-` | - |
+| `y` | `string \| number` | No | `-` | - |
+| `y1` | `string \| number` | No | `-` | - |
+| `y2` | `string \| number` | No | `-` | - |
+| `yAxis` | `Partial<Omit<AxisConfigProps, data>> \| Partial<Omit<AxisConfigProps, data>>[]` | No | `-` | Configuration for y-axis(es). First defined axis becomes default. |
+| `yChannelSelector` | `string` | No | `-` | - |
+| `z` | `string \| number` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `zoomAndPan` | `string` | No | `-` | - |
+
+
+## Examples
+
+CartesianChart is a customizable, SVG based component that can be used to display a variety of data in a x/y coordinate space. The underlying logic is handled by D3.
+
+### Basic Example
+
+[AreaChart](/components/graphs/AreaChart/), [BarChart](/components/graphs/BarChart/), and [LineChart](/components/graphs/LineChart/) are built on top of CartesianChart and have default functionality for your chart.
+
+```jsx live
+<VStack gap={2}>
+  <AreaChart
+    enableScrubbing
+    height={{ base: 150, tablet: 200, desktop: 250 }}
+    series={[
+      {
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      },
+    ]}
+    curve="monotone"
+    showYAxis
+    yAxis={{
+      showGrid: true,
+    }}
+  >
+    <Scrubber />
+  </AreaChart>
+  <BarChart
+    enableScrubbing
+    height={{ base: 150, tablet: 200, desktop: 250 }}
+    series={[
+      {
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      },
+    ]}
+    showYAxis
+    yAxis={{
+      showGrid: true,
+    }}
+  >
+    <Scrubber hideOverlay seriesIds={[]} />
+  </BarChart>
+  <LineChart
+    enableScrubbing
+    height={{ base: 150, tablet: 200, desktop: 250 }}
+    series={[
+      {
+        id: 'prices',
+        data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      },
+    ]}
+    curve="monotone"
+    showYAxis
+    showArea
+    yAxis={{
+      showGrid: true,
+    }}
+  >
+    <Scrubber />
+  </LineChart>
+</VStack>
+```
+
+### Series
+
+Series are the data that will be displayed on the chart. Each series must have a defined `id`.
+
+#### Series Data
+
+You can pass in an array of numbers or an array of tuples for the `data` prop. Passing in null values is equivalent to no data at that index.
+
+```jsx live
+function ForecastedPrice() {
+  const ForecastRect = memo(({ startIndex, endIndex }) => {
+    const { drawingArea, getXScale } = useCartesianChartContext();
+
+    const xScale = getXScale();
+
+    if (!xScale) return;
+
+    const startX = xScale(startIndex);
+    const endX = xScale(endIndex);
+    return (
+      <rect
+        x={startX}
+        y={drawingArea.y}
+        width={endX - startX}
+        height={drawingArea.height}
+        fill="var(--color-accentSubtleBlue)"
+      />
+    );
+  });
+  return (
+    <CartesianChart
+      enableScrubbing
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      series={[
+        {
+          id: 'prices',
+          data: [10, 22, 29, 45, 98, 45, 22, 52, 54, 60, 64, 68, 72, 76],
+          color: 'var(--color-accentBoldBlue)',
+        },
+        {
+          id: 'variance',
+          data: [
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            null,
+            [52, 52],
+            [50, 57],
+            [52, 63],
+            [55, 75],
+            [57, 77],
+            [59, 79],
+            [60, 80],
+          ],
+          color: 'var(--color-accentBoldBlue)',
+        },
+      ]}
+      yAxis={{
+        showGrid: true,
+      }}
+    >
+      <ForecastRect startIndex={7} endIndex={13} />
+      <Area seriesId="variance" type="solid" curve="monotone" fillOpacity={0.3} />
+      <Line seriesId="prices" curve="monotone" />
+    </CartesianChart>
+  );
+}
+```
+
+#### Series Axis IDs
+
+Each series can have a different `yAxisId`, allowing you to compare data from different contexts.
+
+```jsx live
+<CartesianChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'revenue',
+      data: [455, 520, 380, 455, 190, 235],
+      yAxisId: 'revenue',
+      color: 'var(--color-accentBoldYellow)',
+    },
+    {
+      id: 'profit',
+      data: [23, 15, 30, 56, 4, 12],
+      yAxisId: 'profit',
+      color: 'var(--color-fgPositive)',
+    },
+  ]}
+  xAxis={{
+    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+    scaleType: 'band',
+  }}
+  yAxis={[
+    {
+      id: 'revenue',
+    },
+    {
+      id: 'profit',
+    },
+  ]}
+>
+  <XAxis showLine showTickMarks />
+  <YAxis
+    showGrid
+    showLine
+    showTickMarks
+    axisId="revenue"
+    position="left"
+    requestedTickCount={5}
+    tickLabelFormatter={(value) => `$${value}k`}
+    width={60}
+  />
+  <YAxis
+    showLine
+    showTickMarks
+    axisId="profit"
+    requestedTickCount={5}
+    tickLabelFormatter={(value) => `$${value}k`}
+  />
+  <BarPlot />
+</CartesianChart>
+```
+
+#### Series Stacks
+
+You can provide a `stackId` to stack series together.
+
+```jsx live
+<AreaChart
+  enableScrubbing
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'pricesA',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      stackId: 'prices',
+      color: 'var(--color-accentBoldGreen)',
+    },
+    {
+      id: 'pricesB',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      stackId: 'prices',
+      color: 'var(--color-accentBoldPurple)',
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  yAxis={{
+    showGrid: true,
+  }}
+>
+  <Scrubber />
+</LineChart>
+```
+
+### 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.
+
+```jsx live
+<CartesianChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  xAxis={{
+    scaleType: 'band',
+  }}
+  yAxis={{
+    domain: { min: 0 },
+  }}
+>
+  <YAxis showLine showTickMarks showGrid />
+  <XAxis showLine showTickMarks />
+  <BarPlot />
+</CartesianChart>
+```
+
+For more info, learn about [XAxis](/components/graphs/XAxis/#axis-config) and [YAxis](/components/graphs/YAxis/#axis-config) configuration.
+
+### Inset
+
+You can adjust the inset around the entire chart (outside the axes) with the `inset` prop. This is useful for when you want to have components that are outside of the drawing area of the data but still within the chart svg.
+
+You can also remove the default inset, such as to have a compact line chart.
+
+```jsx live
+function Insets() {
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+
+const formatPrice = useCallback((dataIndex: number) => {
+  const price = data[dataIndex];
+  return `$${price.toLocaleString('en-US', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+}, []);
+
+  return (
+    <HStack gap={2}>
+      <VStack gap={1}>
+        <Text font="label1">No inset</Text>
+        <LineChart
+          height={100}
+          inset={0}
+          series={[
+            {
+              id: 'prices',
+              data,
+            },
+          ]}
+          yAxis={{ domainLimit: 'strict' }}
+          curve="monotone"
+          showArea
+          style={{ border: '2px solid var(--color-fgPrimary)' }}
+        />
+      </VStack>
+      <VStack gap={1}>
+        <Text font="label1">Custom inset</Text>
+        <LineChart
+          enableScrubbing
+          height={100}
+          inset={{ left: 10, top: 16, right: 10, bottom: 10 }}
+          series={[
+            {
+              id: 'prices',
+              data,
+            },
+          ]}
+          yAxis={{ domainLimit: 'strict' }}
+          curve="monotone"
+          showArea
+          style={{ border: '2px solid var(--color-fgPrimary)' }}
+        >
+          <Scrubber label={formatPrice} />
+        </LineChart>
+      </VStack>
+      <VStack gap={1}>
+        <Text font="label1">Default inset</Text>
+        <LineChart
+          enableScrubbing
+          height={100}
+          series={[
+            {
+              id: 'prices',
+              data,
+            },
+          ]}
+          yAxis={{ domainLimit: 'strict' }}
+          curve="monotone"
+          showArea
+          style={{ border: '2px solid var(--color-fgPrimary)' }}
+        >
+          <Scrubber label={formatPrice} />
+        </LineChart>
+      </VStack>
+    </HStack>
+  );
+}
+```
+
+### Scrubbing
+
+CartesianChart has built-in scrubbing functionality that can be enabled with the `enableScrubbing` prop. This will then enable the usage of `onScrubberPositionChange` to get the current position of the scrubber as the user interacts with the chart.
+
+```jsx live
+function Scrubbing() {
+  const [scrubIndex, setScrubIndex] = useState(undefined);
+
+  const onScrubberPositionChange = useCallback((index: number | undefined) => {
+    setScrubIndex(index);
+  }, []);
+
+  return (
+    <VStack gap={2}>
+    <Text font="label1">Scrubber index: {scrubIndex ?? 'none'}</Text>
+      <LineChart
+        enableScrubbing
+        onScrubberPositionChange={onScrubberPositionChange}
+        height={{ base: 150, tablet: 200, desktop: 250 }}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          },
+        ]}
+        curve="monotone"
+        showYAxis
+        showArea
+        yAxis={{
+          showGrid: true,
+          width: 32
+        }}
+        inset={{ right: 0 }}
+      >
+        <Scrubber />
+      </LineChart>
+    </VStack>
+  );
+}
+```
+
+### Customization
+
+#### Price with Volume
+
+You can showcase the price and volume of an asset over time within one chart.
+
+```jsx live
+function PriceWithVolume() {
+  const [scrubIndex, setScrubIndex] = useState(null);
+  const btcData = btcCandles
+    .slice(0, 180)
+    .reverse()
+
+  const btcPrices = btcData.map((candle) => parseFloat(candle.close));
+  const btcVolumes = btcData.map((candle) => parseFloat(candle.volume));
+  const btcDates = btcData.map((candle) => new Date(parseInt(candle.start) * 1000));
+
+  const formatPrice = useCallback((price: number) => {
+    return `$${price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  }, []);
+
+  const formatPriceInThousands = useCallback((price: number) => {
+    return `$${(price / 1000).toLocaleString('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+    })}k`;
+  }, []);
+
+  const formatVolume = useCallback((volume: number) => {
+    return `${(volume / 1000).toFixed(2)}K`;
+  }, []);
+
+  const formatDate = useCallback((date: Date) => {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+    });
+  }, []);
+
+  const displayIndex = scrubIndex ?? btcPrices.length - 1;
+  const currentPrice = btcPrices[displayIndex];
+  const currentVolume = btcVolumes[displayIndex];
+  const currentDate = btcDates[displayIndex];
+  const priceChange = displayIndex > 0
+    ? ((currentPrice - btcPrices[displayIndex - 1]) / btcPrices[displayIndex - 1])
+    : 0;
+
+  const accessibilityLabel = useMemo(() => {
+    if (scrubIndex === null) return `Current Bitcoin price: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
+    return `Bitcoin price at ${formatDate(currentDate)}: ${formatPrice(currentPrice)}, Volume: ${formatVolume(currentVolume)}`;
+  }, [scrubIndex, currentPrice, currentVolume, currentDate, formatPrice, formatVolume, formatDate]);
+
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const headerId = useId();
+
+  return (
+    <VStack gap={2}>
+     <SectionHeader
+        id={headerId}
+        style={{ padding: 0 }}
+        title={<Text font="title1">Bitcoin</Text>}
+        balance={<Text font="title2">{formatPrice(currentPrice)}</Text>}
+        end={
+          <HStack gap={2}>
+            <VStack justifyContent="center" alignItems="flex-end">
+              <Text font="label1">{formatDate(currentDate)}</Text>
+              <Text font="label2">{formatVolume(currentVolume)}</Text>
+            </VStack>
+            <VStack justifyContent="center">
+              <RemoteImage source={assets.btc.imageUrl} size="xl" shape="circle" />
+            </VStack>
+          </HStack>
+        }
+      />
+      <CartesianChart
+        enableScrubbing
+        onScrubberPositionChange={setScrubIndex}
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: btcPrices,
+            color: assets.btc.color,
+            yAxisId: 'price',
+          },
+          {
+            id: 'volume',
+            data: btcVolumes,
+            color: 'var(--color-fgMuted)',
+            yAxisId: 'volume',
+          },
+        ]}
+        style={{ outlineColor: assets.btc.color }}
+        xAxis={{ scaleType: 'band', range: ({ min, max }) => ({ min, max: max - 16 }) }}
+        yAxis={[
+          {
+            id: 'price',
+            domain: ({ min, max }) => ({ min: min * 0.9, max }),
+          },
+          {
+            id: 'volume',
+            range: ({ min, max }) => ({ min: max - 32, max }),
+          },
+        ]}
+        accessibilityLabel={accessibilityLabel}
+        aria-labelledby={headerId}
+        inset={{ top: 8, left: 8, right: 0, bottom: 0 }}
+      >
+        <YAxis axisId="price" showGrid tickLabelFormatter={formatPriceInThousands} width={48} GridLineComponent={ThinSolidLine} />
+        <BarPlot seriesIds={['volume']} />
+        <Line seriesId="prices" curve="monotone" showArea />
+        <Scrubber seriesIds={['prices']} />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
+#### Earnings History
+
+You can also create your own type of cartesian chart by using `getSeriesData`, `getXScale`, and `getYScale` directly.
+
+```jsx live
+function EarningsHistory() {
+  const CirclePlot = memo(({ seriesId, opacity = 1 }: { seriesId: string, opacity?: number }) => {
+    const { drawingArea, getSeries, getSeriesData, getXScale, getYScale } = useCartesianChartContext();
+    const series = getSeries(seriesId);
+    const data = getSeriesData(seriesId);
+    const xScale = getXScale();
+    const yScale = getYScale(series?.yAxisId);
+
+    if (!xScale || !yScale || !data || !isCategoricalScale(xScale)) return null;
+
+    const yScaleSize = Math.abs(yScale.range()[1] - yScale.range()[0]);
+
+    // Have circle diameter be the smaller of the x scale bandwidth or 10% of the y space available
+    const diameter = Math.min(xScale.bandwidth(), yScaleSize / 10);
+
+    return (
+      <g>
+        {data.map((value, index) => {
+          if (value === null || value === undefined) return null;
+
+          // Get x position from band scale - center of the band
+          const xPos = xScale(index);
+          if (xPos === undefined) return null;
+
+          const centerX = xPos + xScale.bandwidth() / 2;
+
+          // Get y position from value
+          const yValue = Array.isArray(value) ? value[1] : value;
+          const centerY = yScale(yValue);
+          if (centerY === undefined) return null;
+
+          return (
+            <circle
+              key={`${seriesId}-${index}`}
+              cx={centerX}
+              cy={centerY}
+              fill={series?.color || 'var(--color-fgPrimary)'}
+              opacity={opacity}
+              r={diameter / 2}
+            />
+          );
+        })}
+      </g>
+    );
+  });
+
+  const quarters = useMemo(() => ['Q1', 'Q2', 'Q3', 'Q4'], []);
+  const estimatedEPS = useMemo(() => [1.71, 1.82, 1.93, 2.34], []);
+  const actualEPS = useMemo(() => [1.68, 1.83, 2.01, 2.24], []);
+
+  const formatEarningAmount = useCallback((value: number) => {
+    return `$${value.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  }, []);
+
+  const surprisePercentage = useCallback(
+    (index: number): ChartTextChildren => {
+      const percentage = (actualEPS[index] - estimatedEPS[index]) / estimatedEPS[index];
+      const percentageString = percentage.toLocaleString('en-US', {
+        style: 'percent',
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      });
+
+      return (
+        <tspan
+          style={{
+            fill: percentage > 0 ? 'var(--color-fgPositive)' : 'var(--color-fgNegative)',
+            fontWeight: 'bold',
+          }}
+        >
+          {percentage > 0 ? '+' : ''}
+          {percentageString}
+        </tspan>
+      );
+    },
+    [actualEPS, estimatedEPS],
+  );
+
+  const LegendItem = memo(({ opacity = 1, label }: { opacity?: number, label: string }) => {
+    return (
+      <Box alignItems="center" gap={0.5}>
+        <LegendDot opacity={opacity} />
+        <Text font="label2">{label}</Text>
+      </Box>
+    );
+  });
+
+  const LegendDot = memo((props: BoxBaseProps) => {
+    return <Box borderRadius={1000} width={10} height={10} background="bgPositive" {...props} />;
+  });
+
+  return (
+    <VStack gap={0.5}>
+      <CartesianChart
+        overflow="visible"
+        animate={false}
+        height={250}
+        padding={0}
+        series={[
+          {
+            id: 'estimatedEPS',
+            data: estimatedEPS,
+            color: 'var(--color-bgPositive)',
+          },
+          { id: 'actualEPS', data: actualEPS, color: 'var(--color-bgPositive)' },
+        ]}
+        xAxis={{ scaleType: 'band', categoryPadding: 0.25 }}
+      >
+        <YAxis
+          showGrid
+          position="left"
+          requestedTickCount={3}
+          tickLabelFormatter={formatEarningAmount}
+        />
+        <XAxis height={20} tickLabelFormatter={(index) => quarters[index]} />
+        <XAxis height={20} tickLabelFormatter={surprisePercentage} />
+        <CirclePlot opacity={0.5} seriesId="estimatedEPS" />
+        <CirclePlot seriesId="actualEPS" />
+      </CartesianChart>
+      <HStack justifyContent="flex-end" gap={2}>
+        <LegendItem opacity={0.5} label="Estimated EPS" />
+        <LegendItem label="Actual EPS" />
+      </HStack>
+    </VStack>
+  );
+}
+```
+
+#### Trading Trends
+
+You can have multiple axes with different domains and ranges to showcase different pieces of data over the time time period.
+
+```jsx live
+function TradingTrends() {
+  const profitData = [34, 24, 28, -4, 8, -16, -3, 12, 24, 18, 20, 28];
+  const gains = profitData.map((value) => (value > 0 ? value : 0));
+  const losses = profitData.map((value) => (value < 0 ? value : 0));
+
+  const renderProfit = useCallback((value: number) => {
+    return `$${value}M`;
+  }, []);
+
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} strokeLinecap="butt" />);
+  const ThickSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={2} strokeLinecap="butt" />);
+
+  return (
+    <CartesianChart
+      height={250}
+      series={[
+        { id: 'gains', data: gains, yAxisId: 'profit', color: 'var(--color-bgPositive)', stackId: 'bars' },
+        { id: 'losses', data: losses, yAxisId: 'profit', color: 'var(--color-bgNegative)', stackId: 'bars' },
+        {
+          id: 'revenue',
+          data: [128, 118, 122, 116, 120, 114, 118, 122, 126, 130, 134, 138],
+          yAxisId: 'revenue',
+          color: 'var(--color-fgMuted)',
+        },
+      ]}
+      xAxis={{ scaleType: 'band', data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }}
+      yAxis={[
+        { id: 'profit', range: ({ min, max }) => ({ min: min, max: max - 64 }), domain: { min: -40, max: 40 } },
+        { id: 'revenue', range: ({ min, max }) => ({ min: max - 64, max }), domain: { min: 100 } },
+      ]}
+    >
+      <YAxis axisId="profit" position="left" showGrid tickLabelFormatter={renderProfit} GridLineComponent={ThinSolidLine} />
+      <XAxis />
+      <ReferenceLine LineComponent={ThickSolidLine} dataY={0} yAxisId="profit" stroke="rgb(var(--gray15))" />
+      <BarPlot seriesIds={['gains', 'losses']} />
+      <Line seriesId="revenue" curve="monotone" showArea />
+    </CartesianChart>
+  );
+}
+```
+
+