@coinbase/cds-mcp-server 8.21.8 → 8.22.2

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

@@ -26,7 +26,6 @@ AreaChart is a cartesian chart variant that allows for easy visualization of sta
   ]}
   type="gradient"
   showLines
-  curve="monotone"
   showYAxis
   yAxis={{
     showGrid: true,
@@ -49,7 +48,6 @@ AreaChart is a cartesian chart variant that allows for easy visualization of sta
   ]}
   type="gradient"
   showLines
-  curve="monotone"
 />
 ```
 
@@ -144,38 +142,482 @@ You can have different area styles for each series.
 />
 ```
 
+### Animations
+
+You can configure chart transitions using the `transition` prop.
+
+#### Customized Transitions
+
+You can pass in a custom spring based transition to your `AreaChart` for a custom transition.
+
+```jsx live
+function AnimatedStackedAreas() {
+  const dataCount = 20;
+  const minYValue = 5000;
+  const maxDataOffset = 15000;
+  const minStepOffset = 2500;
+  const maxStepOffset = 10000;
+  const updateInterval = 500;
+  const seriesSpacing = 2000;
+  const myTransition = { type: 'spring', stiffness: 700, damping: 20 };
+
+  const seriesConfig = [
+    { id: 'red', label: 'Red', color: 'rgb(var(--red40))' },
+    { id: 'orange', label: 'Orange', color: 'rgb(var(--orange40))' },
+    { id: 'yellow', label: 'Yellow', color: 'rgb(var(--yellow40))' },
+    { id: 'green', label: 'Green', color: 'rgb(var(--green40))' },
+    { id: 'blue', label: 'Blue', color: 'rgb(var(--blue40))' },
+    { id: 'indigo', label: 'Indigo', color: 'rgb(var(--indigo40))' },
+    { id: 'purple', label: 'Purple', color: 'rgb(var(--purple40))' },
+  ];
+
+  const domainLimit = maxDataOffset + seriesConfig.length * seriesSpacing;
+
+  function generateNextValue(previousValue) {
+    const range = maxStepOffset - minStepOffset;
+    const offset = Math.random() * range + minStepOffset;
+
+    let direction;
+    if (previousValue >= maxDataOffset) {
+      direction = -1;
+    } else if (previousValue <= minYValue) {
+      direction = 1;
+    } else {
+      direction = Math.random() < 0.5 ? -1 : 1;
+    }
+
+    let newValue = previousValue + offset * direction;
+    newValue = Math.max(minYValue, Math.min(maxDataOffset, newValue));
+    return newValue;
+  }
+
+  function generateInitialData() {
+    const data = [];
+
+    let previousValue = minYValue + Math.random() * (maxDataOffset - minYValue);
+    data.push(previousValue);
+
+    for (let i = 1; i < dataCount; i++) {
+      const newValue = generateNextValue(previousValue);
+      data.push(newValue);
+      previousValue = newValue;
+    }
+
+    return data;
+  }
+
+  const MemoizedDottedArea = memo((props) => (
+    <DottedArea {...props} baselineOpacity={1} peakOpacity={1} />
+  ));
+
+  function AnimatedChart() {
+    const [data, setData] = useState(generateInitialData);
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData((currentData) => {
+          const lastValue = currentData[currentData.length - 1] ?? 0;
+          const newValue = generateNextValue(lastValue);
+
+          return [...currentData.slice(1), newValue];
+        });
+      }, updateInterval);
+
+      return () => clearInterval(intervalId);
+    }, []);
+
+    const series = seriesConfig.map((config, index) => ({
+      id: config.id,
+      label: config.label,
+      color: config.color,
+      data: index === 0 ? data : Array(dataCount).fill(seriesSpacing),
+    }));
+
+    return (
+      <AreaChart
+        overflow="visible"
+        stacked
+        height={{ base: 200, tablet: 250, desktop: 300 }}
+        series={series}
+        type="dotted"
+        showLines
+        AreaComponent={MemoizedDottedArea}
+        transition={myTransition}
+        inset={0}
+        showYAxis
+        yAxis={{
+          showGrid: true,
+          width: 0,
+          tickLabelFormatter: () => '',
+          domain: { min: 0, max: domainLimit },
+        }}
+      />
+    );
+  }
+
+  return <AnimatedChart />;
+}
+```
+
+#### Disable Animations
+
+You can also disable animations by setting the `animate` prop to `false`.
+
+```jsx live
+function AnimatedStackedAreas() {
+  const dataCount = 20;
+  const minYValue = 5000;
+  const maxDataOffset = 15000;
+  const minStepOffset = 2500;
+  const maxStepOffset = 10000;
+  const updateInterval = 500;
+  const seriesSpacing = 2000;
+  const myTransition = { type: 'spring', stiffness: 700, damping: 20 };
+
+  const seriesConfig = [
+    { id: 'red', label: 'Red', color: 'rgb(var(--red40))' },
+    { id: 'orange', label: 'Orange', color: 'rgb(var(--orange40))' },
+    { id: 'yellow', label: 'Yellow', color: 'rgb(var(--yellow40))' },
+    { id: 'green', label: 'Green', color: 'rgb(var(--green40))' },
+    { id: 'blue', label: 'Blue', color: 'rgb(var(--blue40))' },
+    { id: 'indigo', label: 'Indigo', color: 'rgb(var(--indigo40))' },
+    { id: 'purple', label: 'Purple', color: 'rgb(var(--purple40))' },
+  ];
+
+  const domainLimit = maxDataOffset + seriesConfig.length * seriesSpacing;
+
+  function generateNextValue(previousValue) {
+    const range = maxStepOffset - minStepOffset;
+    const offset = Math.random() * range + minStepOffset;
+
+    let direction;
+    if (previousValue >= maxDataOffset) {
+      direction = -1;
+    } else if (previousValue <= minYValue) {
+      direction = 1;
+    } else {
+      direction = Math.random() < 0.5 ? -1 : 1;
+    }
+
+    let newValue = previousValue + offset * direction;
+    newValue = Math.max(minYValue, Math.min(maxDataOffset, newValue));
+    return newValue;
+  }
+
+  function generateInitialData() {
+    const data = [];
+
+    let previousValue = minYValue + Math.random() * (maxDataOffset - minYValue);
+    data.push(previousValue);
+
+    for (let i = 1; i < dataCount; i++) {
+      const newValue = generateNextValue(previousValue);
+      data.push(newValue);
+      previousValue = newValue;
+    }
+
+    return data;
+  }
+
+  const MemoizedDottedArea = memo((props) => (
+    <DottedArea {...props} baselineOpacity={1} peakOpacity={1} />
+  ));
+
+  function AnimatedChart() {
+    const [data, setData] = useState(generateInitialData);
+
+    useEffect(() => {
+      const intervalId = setInterval(() => {
+        setData((currentData) => {
+          const lastValue = currentData[currentData.length - 1] ?? 0;
+          const newValue = generateNextValue(lastValue);
+
+          return [...currentData.slice(1), newValue];
+        });
+      }, updateInterval);
+
+      return () => clearInterval(intervalId);
+    }, []);
+
+    const series = seriesConfig.map((config, index) => ({
+      id: config.id,
+      label: config.label,
+      color: config.color,
+      // First series gets animated data, others get constant height
+      data: index === 0 ? data : Array(dataCount).fill(seriesSpacing),
+    }));
+
+    return (
+      <AreaChart
+        animate={false}
+        overflow="visible"
+        stacked
+        height={{ base: 200, tablet: 250, desktop: 300 }}
+        series={series}
+        type="dotted"
+        showLines
+        AreaComponent={MemoizedDottedArea}
+        inset={0}
+        showYAxis
+        yAxis={{
+          showGrid: true,
+          width: 0,
+          tickLabelFormatter: () => '',
+          domain: { min: 0, max: domainLimit },
+        }}
+      />
+    );
+  }
+
+  return <AnimatedChart />;
+}
+```
+
+### Gradients
+
+You can use the `gradient` prop on `series` or `Area` components to enable gradients.
+
+Each stop requires an `offset`, which is based on the data within the x/y scale and `color`, with an optional `opacity` (defaults to 1).
+
+Values in between stops will be interpolated smoothly using [srgb color space](https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty).
+
+```jsx live
+function ContinuousGradient() {
+  const spectrumColors = [
+    'blue',
+    'green',
+    'orange',
+    'yellow',
+    'gray',
+    'indigo',
+    'pink',
+    'purple',
+    'red',
+    'teal',
+    'chartreuse',
+  ];
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+
+  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
+
+  return (
+    <VStack gap={2}>
+      <HStack gap={1} justifyContent="flex-end" flexWrap="wrap">
+        {spectrumColors.map((color) => (
+          <Pressable
+            key={color}
+            onClick={() => setCurrentSpectrumColor(color)}
+            accessibilityLabel={`Select ${color}`}
+            style={{
+              backgroundColor: `rgb(var(--${color}20))`,
+              border: `2px solid rgb(var(--${color}50))`,
+              outlineColor: `rgb(var(--${color}80))`,
+              outline:
+                currentSpectrumColor === color ? `2px solid rgb(var(--${color}80))` : undefined,
+            }}
+            width={{ base: 16, tablet: 24, desktop: 24 }}
+            height={{ base: 16, tablet: 24, desktop: 24 }}
+            borderRadius={1000}
+          />
+        ))}
+      </HStack>
+      <AreaChart
+        enableScrubbing
+        height={{ base: 150, tablet: 200, desktop: 250 }}
+        series={[
+          {
+            id: 'prices',
+            data: data,
+            gradient: {
+              stops: ({ min, max }) => [
+                // Allows a function which accepts min/max or direct array
+                { offset: min, color: `rgb(var(--${currentSpectrumColor}80))` },
+                { offset: max, color: `rgb(var(--${currentSpectrumColor}20))` },
+              ],
+            },
+          },
+        ]}
+        showYAxis
+        yAxis={{
+          showGrid: true,
+        }}
+      >
+        <Scrubber />
+      </AreaChart>
+    </VStack>
+  );
+}
+```
+
+#### Discrete
+
+You can set multiple stops at the same offset to create a discrete gradient.
+
+```jsx live
+function DiscreteGradient() {
+  const spectrumColors = [
+    'blue',
+    'green',
+    'orange',
+    'yellow',
+    'gray',
+    'indigo',
+    'pink',
+    'purple',
+    'red',
+    'teal',
+    'chartreuse',
+  ];
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+
+  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
+
+  return (
+    <VStack gap={2}>
+      <HStack gap={1} justifyContent="flex-end" flexWrap="wrap">
+        {spectrumColors.map((color) => (
+          <Pressable
+            key={color}
+            onClick={() => setCurrentSpectrumColor(color)}
+            accessibilityLabel={`Select ${color}`}
+            style={{
+              backgroundColor: `rgb(var(--${color}20))`,
+              border: `2px solid rgb(var(--${color}50))`,
+              outlineColor: `rgb(var(--${color}80))`,
+              outline:
+                currentSpectrumColor === color ? `2px solid rgb(var(--${color}80))` : undefined,
+            }}
+            width={{ base: 16, tablet: 24, desktop: 24 }}
+            height={{ base: 16, tablet: 24, desktop: 24 }}
+            borderRadius={1000}
+          />
+        ))}
+      </HStack>
+      <AreaChart
+        enableScrubbing
+        height={{ base: 150, tablet: 200, desktop: 250 }}
+        series={[
+          {
+            id: 'prices',
+            data: data,
+            gradient: {
+              stops: ({ min, max }) => [
+                { offset: min, color: `rgb(var(--${currentSpectrumColor}80))` },
+                { offset: min + (max - min) / 3, color: `rgb(var(--${currentSpectrumColor}80))` },
+                { offset: min + (max - min) / 3, color: `rgb(var(--${currentSpectrumColor}50))` },
+                {
+                  offset: min + ((max - min) / 3) * 2,
+                  color: `rgb(var(--${currentSpectrumColor}50))`,
+                },
+                {
+                  offset: min + ((max - min) / 3) * 2,
+                  color: `rgb(var(--${currentSpectrumColor}20))`,
+                },
+                { offset: max, color: `rgb(var(--${currentSpectrumColor}20))` },
+              ],
+            },
+          },
+        ]}
+        showLines
+        strokeWidth={4}
+        showYAxis
+        yAxis={{
+          showGrid: true,
+        }}
+        fillOpacity={0.5}
+      >
+        <Scrubber />
+      </AreaChart>
+    </VStack>
+  );
+}
+```
+
+#### Axes
+
+By default, gradients will be applied to the y-axis. You can apply a gradient to the x-axis by setting `axis` to `x` in the gradient definition.
+
+```jsx live
+function XAxisGradient() {
+  const spectrumColors = [
+    'blue',
+    'green',
+    'orange',
+    'yellow',
+    'gray',
+    'indigo',
+    'pink',
+    'purple',
+    'red',
+    'teal',
+    'chartreuse',
+  ];
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+
+  const [currentSpectrumColor, setCurrentSpectrumColor] = useState('pink');
+
+  return (
+    <VStack gap={2}>
+      <HStack gap={1} justifyContent="flex-end" flexWrap="wrap">
+        {spectrumColors.map((color) => (
+          <Pressable
+            key={color}
+            onClick={() => setCurrentSpectrumColor(color)}
+            accessibilityLabel={`Select ${color}`}
+            style={{
+              backgroundColor: `rgb(var(--${color}20))`,
+              border: `2px solid rgb(var(--${color}50))`,
+              outlineColor: `rgb(var(--${color}80))`,
+              outline:
+                currentSpectrumColor === color ? `2px solid rgb(var(--${color}80))` : undefined,
+            }}
+            width={{ base: 16, tablet: 24, desktop: 24 }}
+            height={{ base: 16, tablet: 24, desktop: 24 }}
+            borderRadius={1000}
+          />
+        ))}
+      </HStack>
+      <AreaChart
+        enableScrubbing
+        height={{ base: 150, tablet: 200, desktop: 250 }}
+        series={[
+          {
+            id: 'prices',
+            data: data,
+            gradient: {
+              axis: 'x',
+              stops: ({ min, max }) => [
+                { offset: min, color: `rgb(var(--${currentSpectrumColor}80))`, opacity: 0 },
+                { offset: max, color: `rgb(var(--${currentSpectrumColor}20))`, opacity: 1 },
+              ],
+            },
+          },
+        ]}
+        showYAxis
+        yAxis={{
+          showGrid: true,
+        }}
+      >
+        <Scrubber />
+      </AreaChart>
+    </VStack>
+  );
+}
+```
+
 ## Props
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
 | `AreaComponent` | `AreaComponent` | No | `-` | Component to render the area. Takes precedence over the type prop if provided. |
 | `LineComponent` | `LineComponent` | No | `-` | Component to render the line. Takes precedence over the type prop if provided. |
-| `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 | `-` | - |
+| `alignContent` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch \| baseline \| first baseline \| last baseline>` | No | `-` | - |
+| `alignItems` | `ResponsiveProp<center \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | No | `-` | - |
+| `alignSelf` | `ResponsiveProp<center \| auto \| normal \| start \| end \| flex-start \| flex-end \| stretch \| baseline \| first baseline \| last baseline \| self-start \| self-end>` | 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 | `-` | - |
+| `as` | `div` | No | `-` | - |
+| `aspectRatio` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | 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 | `-` | - |
@@ -195,316 +637,96 @@ You can have different area styles for each series.
 | `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 | `-` | - |
+| `classNames` | `{ root?: string; chart?: string \| undefined; } \| undefined` | No | `-` | Custom class names for the component. |
 | `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 | `-` | - |
-| `curve` | `bump \| catmullRom \| linear \| linearClosed \| monotone \| natural \| step \| stepBefore \| stepAfter` | No | `'linear'` | The curve interpolation method to use for the line. |
-| `cx` | `string \| number` | No | `-` | - |
-| `cy` | `string \| number` | No | `-` | - |
-| `d` | `string` | No | `-` | - |
+| `columnGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `connectNulls` | `boolean` | No | `-` | When true, the area is connected across null values. |
+| `curve` | `bump \| catmullRom \| linear \| linearClosed \| monotone \| natural \| step \| stepBefore \| stepAfter` | No | `'bump'` | The curve interpolation method to use for the line. |
 | `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 | `-` | - |
+| `display` | `ResponsiveProp<grid \| none \| block \| inline \| inline-block \| flex \| inline-flex \| inline-grid \| contents \| flow-root \| revert \| list-item>` | 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 | `-` | - |
-| `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
-| `filter` | `string` | No | `-` | - |
-| `filterRes` | `string \| number` | No | `-` | - |
-| `filterUnits` | `string \| number` | No | `-` | - |
+| `fillOpacity` | `number` | No | `1` | Opacity of the area |
 | `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 | `-` | - |
+| `flexGrow` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `flexShrink` | `inherit \| revert \| -moz-initial \| initial \| 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 | `-` | - |
+| `fontSize` | `ResponsiveProp<inherit \| FontSize>` | No | `-` | - |
+| `fontWeight` | `ResponsiveProp<inherit \| FontWeight>` | No | `-` | - |
+| `gap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `grid` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridArea` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
 | `gridAutoColumns` | `ResponsiveProp<GridAutoColumns<string \| number>>` | No | `-` | - |
-| `gridAutoFlow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| row \| column \| dense` | No | `-` | - |
+| `gridAutoFlow` | `inherit \| revert \| row \| column \| -moz-initial \| initial \| revert-layer \| unset \| 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 | `-` | - |
+| `gridColumn` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridColumnEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridColumnStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRow` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRowEnd` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridRowStart` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridTemplate` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `gridTemplateAreas` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | 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 | `-` | - |
+| `justifyContent` | `ResponsiveProp<left \| right \| center \| normal \| start \| end \| flex-start \| flex-end \| space-between \| space-around \| space-evenly \| stretch>` | 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 | `-` | - |
-| `lineType` | `dotted \| solid \| gradient` | No | `'solid'` | The type of line to render. |
-| `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 | `-` | - |
+| `lineHeight` | `ResponsiveProp<inherit \| LineHeight>` | No | `-` | - |
+| `lineType` | `dotted \| solid` | No | `'solid'` | The type of line to render. |
+| `margin` | `ResponsiveProp<0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
+| `marginBottom` | `ResponsiveProp<0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
+| `marginEnd` | `ResponsiveProp<0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
+| `marginStart` | `ResponsiveProp<0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
+| `marginTop` | `ResponsiveProp<0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
+| `marginX` | `ResponsiveProp<0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | No | `-` | - |
+| `marginY` | `ResponsiveProp<0 \| -1 \| -2 \| -0.25 \| -0.5 \| -0.75 \| -1.5 \| -3 \| -4 \| -5 \| -6 \| -7 \| -8 \| -9 \| -10>` | 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 | `-` | - |
+| `onChange` | `FormEventHandler<HTMLDivElement>` | 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 | `-` | - |
+| `opacity` | `inherit \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `overflow` | `ResponsiveProp<hidden \| auto \| visible \| clip \| scroll>` | No | `-` | - |
+| `padding` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingBottom` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingEnd` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingStart` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingTop` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingX` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
+| `paddingY` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | 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 | `-` | - |
+| `rowGap` | `0 \| 1 \| 2 \| 0.25 \| 0.5 \| 0.75 \| 1.5 \| 3 \| 4 \| 5 \| 6 \| 7 \| 8 \| 9 \| 10` | No | `-` | - |
 | `series` | `AreaSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series supports Area and Line component props for individual customization. |
-| `shapeRendering` | `string \| number` | No | `-` | - |
 | `showLines` | `boolean` | No | `-` | Whether to show lines on top of the areas. Useful for stacked contexts to show the outline of each area. |
 | `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 | `-` | - |
 | `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 [baseline, value] tuples (e.g., [[0, 10], [0, -5]]) 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 | `-` | - |
-| `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 | `-` | - |
-| `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 | `-` | - |
+| `strokeWidth` | `number` | No | `2` | Width of the line |
+| `style` | `CSSProperties` | No | `-` | Custom styles for the root element. |
+| `styles` | `{ root?: CSSProperties; chart?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the component. |
 | `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 | `-` | - |
+| `textAlign` | `ResponsiveProp<center \| start \| end \| justify>` | 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 | `-` | - |
+| `textTransform` | `ResponsiveProp<none \| uppercase \| lowercase \| capitalize>` | No | `-` | - |
 | `top` | `ResponsiveProp<Top<string \| number>>` | No | `-` | - |
-| `transform` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset \| none` | No | `-` | - |
+| `transform` | `inherit \| none \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |
+| `transition` | `Orchestration & Repeat & Tween \| Orchestration & Repeat & Spring \| Orchestration & Repeat & Keyframes \| Orchestration & Repeat & Inertia \| Orchestration & Repeat & Just \| Orchestration & Repeat & None \| Orchestration & Repeat & PermissiveTransitionDefinition \| Orchestration & Repeat & Tween & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Spring & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Keyframes & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Inertia & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & Just & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & None & { [key: string]: TransitionDefinition; } \| Orchestration & Repeat & PermissiveTransitionDefinition & { [key: string]: TransitionDefinition; }` | No | `-` | Transition configuration for path animations. |
 | `type` | `dotted \| solid \| gradient` | No | `'solid'` | The type of area to render. |
-| `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 | `-` | - |
+| `userSelect` | `ResponsiveProp<text \| none \| all \| auto>` | No | `-` | - |
+| `visibility` | `ResponsiveProp<hidden \| visible>` | 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 | `-` | - |
+| `xAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { position?: top \| bottom \| undefined; height?: number \| undefined; }) \| undefined` | No | `-` | Configuration for x-axis. Accepts axis config and axis props. To show the axis, set showXAxis to true. |
+| `yAxis` | `(Partial<AxisConfigProps> & AxisBaseProps & { className?: string; classNames?: { root?: string \| undefined; label?: string \| undefined; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined; style?: CSSProperties \| undefined; styles?: { root?: CSSProperties \| undefined; label?: CSSProperties \| undefined; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined; GridLineComponent?: LineComponent \| undefined; LineComponent?: LineComponent \| undefined; TickMarkLineComponent?: LineComponent \| undefined; tickLabelFormatter?: ((value: number) => ChartTextChildren) \| undefined; TickLabelComponent?: AxisTickLabelComponent \| undefined; } & { axisId?: string \| undefined; position?: left \| right \| undefined; width?: number \| undefined; }) \| undefined` | No | `-` | Configuration for y-axis. Accepts axis config and axis props. To show the axis, set showYAxis to true. |
+| `zIndex` | `inherit \| auto \| revert \| -moz-initial \| initial \| revert-layer \| unset` | No | `-` | - |