@coinbase/cds-mcp-server 8.17.2 → 8.17.4

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

@@ -0,0 +1,1267 @@
+# BarChart
+
+A bar chart component for comparing values across categories. Supports horizontal and vertical orientations, stacked bars, and grouped series.
+
+## Import
+
+```tsx
+import { BarChart } from '@coinbase/cds-web-visualization'
+```
+
+## Examples
+
+### Basic Example
+
+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.
+
+To start, pass in a series of data to the chart.
+
+```jsx live
+<BarChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  curve="monotone"
+  showYAxis
+  yAxis={{
+    showGrid: true,
+  }}
+/>
+```
+
+### 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.
+
+```jsx live
+function MonthlyGainsByAsset() {
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const tickFormatter = useCallback(
+    (amount) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount),
+    [],
+  );
+
+  return (
+    <BarChart
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+      series={[
+        {
+          id: 'btc',
+          data: [
+            345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
+            620.57,
+          ],
+          color: assets.btc.color,
+        },
+        {
+          id: 'eth',
+          data: [
+            270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
+            550.93,
+          ],
+          color: assets.eth.color,
+        },
+      ]}
+      showYAxis
+      yAxis={{
+        showGrid: true,
+        GridLineComponent: ThinSolidLine,
+        tickLabelFormatter: tickFormatter,
+        width: 70,
+      }}
+    />
+  );
+}
+```
+
+### Series Stacking
+
+You can also configure stacking for your chart using the `stacked` prop.
+
+```jsx live
+function MonthlyGainsByAsset() {
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const tickFormatter = useCallback(
+    (amount) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount),
+    [],
+  );
+
+  return (
+    <BarChart
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+      series={[
+        {
+          id: 'xrp',
+          data: [
+            170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
+            85.12,
+          ],
+          color: assets.xrp.color,
+        },
+        {
+          id: 'ltc',
+          data: [
+            450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
+            750.61,
+          ],
+          color: assets.ltc.color,
+        },
+        {
+          id: 'eth',
+          data: [
+            270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
+            550.93,
+          ],
+          color: assets.eth.color,
+        },
+        {
+          id: 'btc',
+          data: [
+            345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
+            620.57,
+          ],
+          color: assets.btc.color,
+        },
+      ]}
+      stacked
+      showYAxis
+      yAxis={{
+        showGrid: true,
+        GridLineComponent: ThinSolidLine,
+        tickLabelFormatter: tickFormatter,
+        width: 70,
+      }}
+    />
+  );
+}
+```
+
+You can also configure multiple stacks by setting the `stackId` prop on each series.
+
+```jsx live
+function MonthlyGainsMultipleStacks() {
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const tickFormatter = useCallback(
+    (amount) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount),
+    [],
+  );
+
+  return (
+    <BarChart
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+      series={[
+        {
+          id: 'xrp',
+          data: [
+            170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
+            85.12,
+          ],
+          color: assets.xrp.color,
+          stackId: 'shortTerm',
+        },
+        {
+          id: 'ltc',
+          data: [
+            450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
+            750.61,
+          ],
+          color: assets.ltc.color,
+          stackId: 'shortTerm',
+        },
+        {
+          id: 'eth',
+          data: [
+            270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
+            550.93,
+          ],
+          color: assets.eth.color,
+          stackId: 'longTerm',
+        },
+        {
+          id: 'btc',
+          data: [
+            345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
+            620.57,
+          ],
+          color: assets.btc.color,
+          stackId: 'longTerm',
+        },
+      ]}
+      stacked
+      showYAxis
+      yAxis={{
+        showGrid: true,
+        GridLineComponent: ThinSolidLine,
+        tickLabelFormatter: tickFormatter,
+        width: 70,
+      }}
+    />
+  );
+}
+```
+
+#### Stack Gap
+
+```jsx live
+function MonthlyGainsByAsset() {
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const tickFormatter = useCallback(
+    (amount) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(amount),
+    [],
+  );
+
+  return (
+    <BarChart
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+      series={[
+        {
+          id: 'xrp',
+          data: [
+            170.22, 340.34, 305.98, 225.39, 250.76, 130.53, 115.81, 195.04, 210.28, 60.42, 120.94,
+            500,
+          ],
+          color: assets.xrp.color,
+        },
+        {
+          id: 'ltc',
+          data: [
+            450.77, 615.33, 355.68, 880.15, 810.99, 520.46, 590.29, 960.52, 910.07, 1020.41, 851.89,
+            500,
+          ],
+          color: assets.ltc.color,
+        },
+        {
+          id: 'eth',
+          data: [
+            270.49, 425.21, 190.75, 680.91, 610.88, 350.67, 440.11, 780.08, 705.83, 840.26, 920.65,
+            500,
+          ],
+          color: assets.eth.color,
+        },
+        {
+          id: 'btc',
+          data: [
+            345.82, 510.63, 280.19, 720.5, 655.37, 410.23, 580.96, 815.44, 740.18, 910.71, 975.02,
+            500,
+          ],
+          color: assets.btc.color,
+        },
+      ]}
+      stackGap={4}
+      stacked
+      showYAxis
+      yAxis={{
+        showGrid: true,
+        GridLineComponent: ThinSolidLine,
+        tickLabelFormatter: tickFormatter,
+        width: 70,
+        domainLimit: 'strict'
+      }}
+    />
+  );
+}
+```
+
+### Border Radius
+
+Bars have a default border radius of `100`. You can change this by setting the `borderRadius` prop on the chart.
+
+Stacks will only round the top corners of touching bars.
+
+```jsx live
+<BarChart
+  stacked
+  borderRadius={1000}
+  height={300}
+  maxWidth={400}
+  padding={0}
+  series={[
+    { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
+    { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
+    { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
+    {
+      id: 'green',
+      data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
+      color: '#33c481',
+    },
+  ]}
+  showXAxis
+  xAxis={{
+    data: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    tickLabelFormatter: (value) => {
+      if (value === 'D') {
+        return <tspan style={{ fontWeight: 'bold' }}>{value}</tspan>;
+      }
+      return value;
+    },
+  }}
+  style={{ margin: '0 auto' }}
+/>
+```
+
+#### Round Baseline
+
+You can also round the baseline of the bars by setting the `roundBaseline` prop on the chart.
+
+```jsx live
+<BarChart
+  roundBaseline
+  stacked
+  borderRadius={1000}
+  height={300}
+  maxWidth={400}
+  padding={0}
+  series={[
+    { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
+    { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
+    { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
+    {
+      id: 'green',
+      data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
+      color: '#33c481',
+    },
+  ]}
+  showXAxis
+  xAxis={{
+    data: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+    tickLabelFormatter: (value) => {
+      if (value === 'D') {
+        return <tspan style={{ fontWeight: 'bold' }}>{value}</tspan>;
+      }
+      return value;
+    },
+  }}
+  style={{ margin: '0 auto' }}
+/>
+```
+
+### Negative Data
+
+```jsx live
+function PositiveAndNegativeCashFlow() {
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const categories = Array.from({ length: 31 }, (_, i) => `3/${i + 1}`);
+  const gains = [
+    5, 0, 6, 18, 0, 5, 12, 0, 12, 22, 28, 18, 0, 12, 6, 0, 0, 24, 0, 0, 4, 0, 18, 0, 0, 14, 10, 16,
+    0, 0, 0,
+  ];
+
+  const losses = [
+    -4, 0, -8, -12, -6, 0, 0, 0, -18, 0, -12, 0, -9, -6, 0, 0, 0, 0, -22, -8, 0, 0, -10, -14, 0, 0,
+    0, 0, 0, -12, -10,
+  ];
+  const series = [
+    { id: 'gains', data: gains, color: 'var(--color-fgPositive)' },
+    { id: 'losses', data: losses, color: 'var(--color-fgNegative)' },
+  ];
+
+  return (
+    <BarChart
+      height={{ base: 150, tablet: 200, desktop: 250 }}
+      inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+      series={series}
+      xAxis={{ data: categories }}
+      stacked
+      showXAxis
+      showYAxis
+      yAxis={{
+        showGrid: true,
+        GridLineComponent: ThinSolidLine,
+        tickLabelFormatter: (value) => `$${value}M`,
+      }}
+    />
+  );
+}
+```
+
+### Missing Bars
+
+You can pass in `null` or `0` values to not render a bar for that data point.
+
+```jsx live
+<BarChart
+  showXAxis
+  showYAxis
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+  series={[
+    {
+      id: 'weekly-data',
+      data: [45, null, 38, 0, 19, null, 32],
+    },
+  ]}
+  xAxis={{
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    showTickMarks: true,
+    showLine: true,
+  }}
+  yAxis={{
+    requestedTickCount: 5,
+    tickLabelFormatter: (value) => `$${value}k`,
+    showGrid: true,
+    showTickMarks: true,
+    showLine: true,
+    tickMarkSize: 1.5,
+    domain: { max: 50 },
+  }}
+/>
+```
+
+You can also use the `BarStackComponent` prop to render an empty circle for zero values.
+
+```jsx live
+function MonthlyRewards() {
+  const months = ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'];
+  const currentMonth = 7;
+  const purple = [null, 6, 8, 10, 7, 6, 6, 8, null, null, null, null];
+  const blue = [null, 10, 12, 11, 10, 9, 10, 11, null, null, null, null];
+  const cyan = [null, 7, 10, 12, 11, 10, 8, 11, null, null, null, null];
+  const green = [10, null, null, null, 1, null, null, 6, null, null, null, null];
+
+  const series = [
+    { id: 'purple', data: purple, color: '#b399ff' },
+    { id: 'blue', data: blue, color: '#4f7cff' },
+    { id: 'cyan', data: cyan, color: '#00c2df' },
+    { id: 'green', data: green, color: '#33c481' },
+  ];
+
+  const CustomBarStackComponent = ({ children, ...props }: BarStackComponentProps) => {
+    if (props.height === 0) {
+      const diameter = props.width;
+      return (
+        <Bar
+          roundBottom
+          roundTop
+          borderRadius={1000}
+          fill="var(--color-bgTertiary)"
+          height={diameter}
+          width={diameter}
+          x={props.x}
+          y={props.y - diameter}
+        />
+      );
+    }
+
+    return <DefaultBarStack {...props}>{children}</DefaultBarStack>;
+  };
+
+  return (
+    <BarChart
+      roundBaseline
+      showXAxis
+      stacked
+      BarStackComponent={CustomBarStackComponent}
+      borderRadius={1000}
+      height={300}
+      inset={0}
+      series={series}
+      showYAxis={false}
+      stackMinSize={3}
+      width={403}
+      xAxis={{
+        tickLabelFormatter: (index) => {
+          if (index == currentMonth) {
+            return <tspan style={{ fontWeight: 'bold' }}>{months[index]}</tspan>;
+          }
+          return months[index];
+        },
+        categoryPadding: 0.27,
+      }}
+    />
+  );
+};
+```
+
+### Customization
+
+#### Bar Spacing
+
+There are two ways to control the spacing between bars. You can set the `barPadding` prop to control the spacing between bars within a series. You can also set the `categoryPadding` prop to control the spacing between stacks of bars.
+
+```jsx live
+<BarChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+  series={[
+    {
+      id: 'pageViews',
+      data: [24, 13, 98, 39, 48, 38, 43],
+      color: 'var(--color-fgPositive)',
+    },
+    {
+      id: 'uniqueVisitors',
+      data: [12, 15, 18, 21, 24, 27, 30],
+      color: 'var(--color-fgNegative)',
+    },
+  ]}
+  borderRadius={0}
+  barPadding={0}
+  showYAxis
+  yAxis={{
+    showGrid: true,
+  }}
+  xAxis={{
+    categoryPadding: 0.2,
+  }}
+/>
+```
+
+#### Minimum Size
+
+To better emphasize small values, you can set the `stackMinSize` or `barMinSize` prop to control the minimum size for entire stacks or individual bar.
+It is recommended to only use `stackMinSize` for stacked charts and `barMinSize` for non-stacked charts.
+
+##### Minimum Stack Size
+
+You can set the `stackMinSize` prop to control the minimum size for entire stacks. This will only apply to stacks that have a value that is not `null` or `0`. It will proportionally scale the values of each bar in the stack to reach the minimum size.
+
+```jsx live
+<BarChart
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+  series={[
+    {
+      id: 'pageViews',
+      data: [24, 3, 98, null, 48, null, 43],
+      color: 'var(--color-fgPositive)',
+    },
+    {
+      id: 'uniqueVisitors',
+      data: [12, 1, 18, null, 24, 1, 30],
+      color: 'var(--color-fgNegative)',
+    },
+  ]}
+  stackMinSize={2}
+  stacked
+  showYAxis
+  yAxis={{
+    showGrid: true,
+  }}
+/>
+```
+
+##### Minimum Bar Size
+
+You can also set the `barMinSize` prop to control the minimum size for individual bars. This will only apply to bars that have a value that is not `null` or `0`.
+
+```jsx live
+<BarChart
+  showXAxis
+  showYAxis
+  height={{ base: 150, tablet: 200, desktop: 250 }}
+  inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+  series={[
+    {
+      id: 'weekly-data',
+      data: [45, 52, 0, 45, null, 1, 32],
+    },
+  ]}
+  xAxis={{
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    showTickMarks: true,
+    showLine: true,
+  }}
+  yAxis={{
+    requestedTickCount: 5,
+    tickLabelFormatter: (value) => `$${value}k`,
+    showGrid: true,
+    showTickMarks: true,
+    showLine: true,
+    tickMarkSize: 1.5,
+    domain: { max: 50 },
+  }}
+  barMinSize={4}
+/>
+```
+
+#### Multiple Y Axes
+
+You can render bars from separate y axes in one `BarPlot`, however they aren't able to be stack.
+
+```jsx live
+<VStack gap={2}>
+  <CartesianChart
+    height={{ base: 150, tablet: 200, desktop: 250 }}
+    inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+    series={[
+      {
+        id: 'revenue',
+        data: [455, 520, 380, 455, 285, 235],
+        yAxisId: 'revenue',
+        color: 'var(--color-accentBoldYellow)',
+      },
+      {
+        id: 'profitMargin',
+        data: [23, 20, 16, 38, 12, 9],
+        yAxisId: 'profitMargin',
+        color: 'var(--color-fgPositive)',
+      },
+    ]}
+    xAxis={{
+      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+      scaleType: 'band',
+    }}
+    yAxis={[
+      {
+        id: 'revenue',
+        domain: { min: 0 },
+      },
+      {
+        id: 'profitMargin',
+        domain: { min: 0, max: 100 },
+      },
+    ]}
+  >
+    <XAxis showLine showTickMarks />
+    <YAxis
+      showGrid
+      showLine
+      showTickMarks
+      axisId="revenue"
+      position="left"
+      requestedTickCount={5}
+      width={60}
+      tickLabelFormatter={(value) => `$${value}k`}
+    />
+    <YAxis
+      showLine
+      showTickMarks
+      axisId="profitMargin"
+      position="right"
+      requestedTickCount={5}
+      tickLabelFormatter={(value) => `${value}%`}
+    />
+    <BarPlot />
+  </CartesianChart>
+  <HStack justifyContent="center" gap={2}>
+    <Box alignItems="center" gap={0.5}>
+      <Box
+        borderRadius={1000}
+        width={10}
+        height={10}
+        style={{ background: 'var(--color-accentBoldYellow)' }}
+      />
+      <Text font="label2">Revenue ($)</Text>
+    </Box>
+    <Box alignItems="center" gap={0.5}>
+      <Box
+        borderRadius={1000}
+        width={10}
+        height={10}
+        style={{ background: 'var(--color-fgPositive)' }}
+      />
+      <Text font="label2">Profit Margin (%)</Text>
+    </Box>
+  </HStack>
+</VStack>
+```
+
+#### Custom Components
+
+##### Candlesticks
+
+You can set the `BarComponent` prop to render a custom component for bars.
+
+```jsx live
+function Candlesticks() {
+  const infoTextId = useId();
+  const infoTextRef = React.useRef<HTMLSpanElement>(null);
+  const selectedIndexRef = React.useRef<number | null>(null);
+  const stockData = btcCandles.slice(0, 90)
+    .reverse();
+  const min = Math.min(...stockData.map((data) => parseFloat(data.low)));
+
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const candlesData = stockData.map((data) => [parseFloat(data.low), parseFloat(data.high)]) as [
+    number,
+    number,
+  ][];
+
+  const CandlestickBarComponent = memo<BarComponentProps>(
+    ({ x, y, width, height, originY, dataX, ...props }) => {
+      const { getYScale } = useCartesianChartContext();
+      const yScale = getYScale();
+
+      const wickX = x + width / 2;
+
+      const timePeriodValue = stockData[dataX as number];
+
+      const open = parseFloat(timePeriodValue.open);
+      const close = parseFloat(timePeriodValue.close);
+
+      const bullish = open < close;
+      const color = bullish ? 'var(--color-fgPositive)' : 'var(--color-fgNegative)';
+      const openY = yScale?.(open) ?? 0;
+      const closeY = yScale?.(close) ?? 0;
+
+      const bodyHeight = Math.abs(openY - closeY);
+      const bodyY = openY < closeY ? openY : closeY;
+
+      return (
+        <g>
+          <line stroke={color} strokeWidth={1} x1={wickX} x2={wickX} y1={y} y2={y + height} />
+          <rect fill={color} height={bodyHeight} width={width} x={x} y={bodyY} />
+        </g>
+      );
+    },
+  );
+
+  const formatPrice = React.useCallback((price: string) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+    }).format(parseFloat(price));
+  }, []);
+
+  const formatVolume = React.useCallback((volume: string) => {
+    const volumeInThousands = parseFloat(volume) / 1000;
+    return (
+      new Intl.NumberFormat('en-US', {
+        style: 'decimal',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      }).format(volumeInThousands) + 'k'
+    );
+  }, []);
+
+  const formatTime = React.useCallback(
+    (index) => {
+      if (index === null || index === undefined || index >= stockData.length) return '';
+      const ts = parseInt(stockData[index].start);
+      return new Date(ts * 1000).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      });
+    },
+    [stockData],
+  );
+
+  const updateInfoText = React.useCallback(
+    (index) => {
+      if (!infoTextRef.current) return;
+
+      const text =
+        index !== null && index !== undefined
+          ? `Open: ${formatPrice(stockData[index].open)}, Close: ${formatPrice(
+              stockData[index].close,
+            )}, Volume: ${formatVolume(stockData[index].volume)}`
+          : formatPrice(stockData[stockData.length - 1].close);
+
+      infoTextRef.current.textContent = text;
+      selectedIndexRef.current = index;
+    },
+    [stockData, formatPrice, formatVolume],
+  );
+  const initialInfo = formatPrice(stockData[stockData.length - 1].close);
+
+  React.useEffect(() => {
+    updateInfoText(selectedIndexRef.current);
+  }, [stockData, updateInfoText]);
+
+  return (
+    <VStack gap={2}>
+      <Text font="headline" id={infoTextId} aria-live="polite">
+        <span ref={infoTextRef}>{initialInfo}</span>
+      </Text>
+      <BarChart
+        enableScrubbing
+        showXAxis
+        showYAxis
+        BarComponent={CandlestickBarComponent}
+        BarStackComponent={({ children }) => <g>{children}</g>}
+        animate={false}
+        borderRadius={0}
+        height={{ base: 150, tablet: 200, desktop: 250 }}
+        inset={{ top: 8, bottom: 8, left: 0, right: 0 }}
+        onScrubberPositionChange={updateInfoText}
+        series={[
+          {
+            id: 'stock-prices',
+            data: candlesData,
+          },
+        ]}
+        xAxis={{
+          tickLabelFormatter: formatTime,
+        }}
+        yAxis={{
+          domain: { min },
+          tickLabelFormatter: formatPrice,
+          width: 92,
+          showGrid: true,
+          GridLineComponent: ThinSolidLine,
+        }}
+        aria-labelledby={infoTextId}
+      >
+        <Scrubber
+            hideOverlay
+            LineComponent={(props) => (
+              <ReferenceLine {...props} LineComponent={ThinSolidLine} />
+            )}
+            seriesIds={[]}
+          />
+      </BarChart>
+    </VStack>
+  );
+};
+```
+
+##### Outlined Stacks
+
+You can set the `BarStackComponent` prop to render a custom component for stacks.
+
+```jsx live
+function MonthlyRewards() {
+  const CustomBarStackComponent = ({ children, ...props }: BarStackComponentProps) => {
+    return (
+      <>
+        <Bar
+          roundBottom
+          roundTop
+          borderRadius={1000}
+          stroke="var(--color-fg)"
+          strokeWidth={4}
+          height={props.height}
+          width={props.width}
+          x={props.x}
+          y={props.y}
+          clip
+        />
+        <DefaultBarStack {...props}>{children}</DefaultBarStack>
+      </>
+    );
+  };
+
+  return (
+    <BarChart
+      roundBaseline
+      stacked
+      BarStackComponent={CustomBarStackComponent}
+      borderRadius={1000}
+      height={300}
+      maxWidth={400}
+      padding={0}
+      series={[
+        { id: 'purple', data: [null, 6, 8, 10, 7, 6, 6, 8, 9, 12, 10, 4], color: '#b399ff' },
+        { id: 'blue', data: [null, 10, 12, 11, 10, 9, 10, 11, 7, 4, 12, 18], color: '#4f7cff' },
+        { id: 'cyan', data: [null, 7, 10, 12, 11, 10, 8, 11, 5, 12, 2, 9], color: '#00c2df' },
+        {
+          id: 'green',
+          data: [10, null, null, null, 1, null, null, 6, null, null, null, null],
+          color: '#33c481',
+        },
+      ]}
+      showXAxis
+      xAxis={{
+        data: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],
+        tickLabelFormatter: (value) => {
+          if (value === 'D') {
+            return <tspan style={{ fontWeight: 'bold' }}>{value}</tspan>;
+          }
+          return value;
+        },
+      }}
+      yAxis={{ range: ({ min, max }) => ({ min, max: max - 4 }) }}
+      style={{ margin: '0 auto' }}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `BarComponent` | `BarComponent` | No | `-` | Component to render the bar. |
+| `BarStackComponent` | `BarStackComponent` | No | `DefaultBarStack` | Custom component to render the stack container. Can be used to add clip paths, outlines, or other custom styling. |
+| `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 | `-` | - |
+| `barMinSize` | `number` | No | `-` | Minimum size for individual bars in the stack. |
+| `barPadding` | `number` | No | `0.1` | Padding between bar groups (0-1). |
+| `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` | `((BorderRadius \| { base?: BorderRadius; phone?: BorderRadius \| undefined; tablet?: BorderRadius \| undefined; desktop?: BorderRadius \| undefined; }) & number) \| undefined` | No | `4` | Border radius of the bar. 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. |
+| `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` | `number` | No | `-` | Fill opacity for the bar. |
+| `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 | `-` | - |
+| `roundBaseline` | `boolean` | No | `-` | Whether to round the baseline of a bar (where the value is 0). |
+| `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` | `BarSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series supports Bar component props for individual customization. |
+| `shapeRendering` | `string \| number` | No | `-` | - |
+| `showXAxis` | `boolean` | No | `-` | Whether to show the X axis. |
+| `showYAxis` | `boolean` | No | `-` | Whether to show the Y axis. |
+| `slope` | `string \| number` | No | `-` | - |
+| `spacing` | `string \| number` | No | `-` | - |
+| `specularConstant` | `string \| number` | No | `-` | - |
+| `specularExponent` | `string \| number` | No | `-` | - |
+| `speed` | `string \| number` | No | `-` | - |
+| `spreadMethod` | `string` | No | `-` | - |
+| `stackGap` | `number` | No | `-` | Gap between bars in the stack. |
+| `stackMinSize` | `number` | No | `-` | Minimum size for the entire stack. |
+| `stacked` | `boolean` | No | `-` | Whether to stack the areas on top of each other. When true, each series builds cumulative values on top of the previous series.  **Note**: Only applies to series data containing singular numbers (e.g., [10, 20, 30]). Series with start & end value tuples (e.g., [[0, 10], [5, 20]]) will be skipped during stacking and rendered as-is. |
+| `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 | `-` | Stroke color for the bar outline. |
+| `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` | `number` | No | `-` | Stroke width for the bar outline. |
+| `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<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | - |
+| `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<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | - |
+| `yChannelSelector` | `string` | No | `-` | - |
+| `z` | `string \| number` | No | `-` | - |
+| `zIndex` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| auto` | No | `-` | - |
+| `zoomAndPan` | `string` | No | `-` | - |
+
+