@coinbase/cds-mcp-server 8.21.8 → 8.22.2

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

@@ -10,405 +10,150 @@ import { LineChart } from '@coinbase/cds-web-visualization'
 
 ## Examples
 
-### Basic Example
+LineChart is a wrapper for [CartesianChart](/components/graphs/CartesianChart) that makes it easy to create standard line charts, supporting a single x/y axis pair. Charts are built using SVGs.
 
-```jsx live
-function BasicExample() {
-  const [scrubIndex, setScrubIndex] = useState(undefined);
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-
-  const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === undefined) return undefined;
-    return `Value: ${data[scrubIndex]} at index ${scrubIndex}`;
-  }, [scrubIndex, data]);
-
-  return (
-    <LineChart
-      enableScrubbing
-      onScrubberPositionChange={setScrubIndex}
-      height={{ base: 150, tablet: 200, desktop: 250 }}
-      series={[
-        {
-          id: 'prices',
-          data: data,
-        },
-      ]}
-      curve="monotone"
-      showYAxis
-      showArea
-      yAxis={{
-        showGrid: true,
-      }}
-      accessibilityLabel={accessibilityLabel}
-    >
-      <Scrubber />
-    </LineChart>
-  );
-}
-```
+### Basics
 
-### Simple
+The only prop required is `series`, which takes an array of series objects. Each series object needs an `id` and a `data` array of numbers.
 
 ```jsx live
 <LineChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
+  showArea
+  height={{ base: 200, tablet: 225, desktop: 250 }}
   series={[
     {
       id: 'prices',
       data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
     },
   ]}
-  curve="monotone"
 />
 ```
 
-### Compact
-
-You can specify the dimensions of the chart to make it more compact.
-
-```jsx live
-function CompactLineChart() {
-  const dimensions = { width: 62, height: 18 };
-
-  const sparklineData = prices
-    .map((price) => parseFloat(price))
-    .filter((price, index) => index % 10 === 0);
-  const positiveFloor = Math.min(...sparklineData) - 10;
-
-  const negativeData = sparklineData.map((price) => -1 * price).reverse();
-  const negativeCeiling = Math.max(...negativeData) + 10;
-
-  const formatPrice = useCallback((price: number) => {
-    return `$${price.toLocaleString('en-US', {
-      minimumFractionDigits: 2,
-      maximumFractionDigits: 2,
-    })}`;
-  }, []);
-
-  const CompactChart = memo(({ data, showArea, color, referenceY }) => (
-    <Box style={{ padding: 1 }}>
-      <LineChart
-        {...dimensions}
-        enableScrubbing={false}
-        overflow="visible"
-        inset={0}
-        showArea={showArea}
-        series={[
-          {
-            id: 'btc',
-            data,
-            color,
-          },
-        ]}
-      >
-        <ReferenceLine dataY={referenceY} />
-      </LineChart>
-    </Box>
-  ));
-
-  const ChartCell = memo(({ data, showArea, color, referenceY, subdetail, variant }) => {
-    const { isPhone } = useBreakpoints();
-
-    return (
-      <ListCell
-        spacingVariant="condensed"
-        description={isPhone ? undefined : assets.btc.symbol}
-        detail={formatPrice(parseFloat(prices[0]))}
-        intermediary={
-          <CompactChart data={data} showArea={showArea} color={color} referenceY={referenceY} />
-        }
-        media={<Avatar src={assets.btc.imageUrl} />}
-        onClick={() => console.log('clicked')}
-        subdetail={subdetail}
-        title={isPhone ? undefined : assets.btc.name}
-        variant={variant}
-        style={{ padding: 0 }}
-      />
-    );
-  });
-
-  return (
-    <VStack>
-      <ChartCell
-        data={sparklineData}
-        color={assets.btc.color}
-        referenceY={parseFloat(prices[Math.floor(prices.length / 4)])}
-        subdetail="-4.55%"
-        variant="negative"
-      />
-      <ChartCell
-        data={sparklineData}
-        showArea
-        color={assets.btc.color}
-        referenceY={parseFloat(prices[Math.floor(prices.length / 4)])}
-        subdetail="-4.55%"
-        variant="negative"
-      />
-      <ChartCell
-        data={sparklineData}
-        showArea
-        color="var(--color-fgPositive)"
-        referenceY={positiveFloor}
-        subdetail="+0.25%"
-        variant="positive"
-      />
-      <ChartCell
-        data={negativeData}
-        showArea
-        color="var(--color-fgNegative)"
-        referenceY={negativeCeiling}
-        subdetail="-4.55%"
-        variant="negative"
-      />
-    </VStack>
-  );
-};
-```
-
-### Gain/Loss
-
-You can use the y-axis scale and a [linearGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/linearGradient) to create a gain/loss chart.
+LineChart also supports multiple lines, interaction, and axes.
+Other props, such as `areaType` can be applied to the chart as a whole or per series.
 
 ```jsx live
-function GainLossChart() {
-  const gradientId = useId();
-
-  const data = [-40, -28, -21, -5, 48, -5, -28, 2, -29, -46, 16, -30, -29, 8];
-
-  const priceFormatter = useCallback(
-    (value) =>
-      new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-        maximumFractionDigits: 0,
-      }).format(value),
+function MultipleLine() {
+  const pages = useMemo(
+    () => ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'],
     [],
   );
+  const pageViews = useMemo(() => [2400, 1398, 9800, 3908, 4800, 3800, 4300], []);
+  const uniqueVisitors = useMemo(() => [4000, 3000, 2000, 2780, 1890, 2390, 3490], []);
 
-  const ChartDefs = ({ threshold = 0 }) => {
-    const { getYScale } = useCartesianChartContext();
-    // get the default y-axis scale
-    const yScale = getYScale();
-
-    if (yScale) {
-      const domain = yScale.domain();
-      const range = yScale.range();
+  const chartAccessibilityLabel = `Website visitors across ${pageViews.length} pages.`;
 
-      const baselinePercentage = ((threshold - domain[0]) / (domain[1] - domain[0])) * 100;
-
-      const negativeColor = 'rgb(var(--gray15))';
-      const positiveColor = 'var(--color-fgPositive)';
-
-      return (
-        <defs>
-          <linearGradient
-            gradientUnits="userSpaceOnUse"
-            id={`${gradientId}-solid`}
-            x1="0%"
-            x2="0%"
-            y1={range[0]}
-            y2={range[1]}
-          >
-            <stop offset="0%" stopColor={negativeColor} />
-            <stop offset={`${baselinePercentage}%`} stopColor={negativeColor} />
-            <stop offset={`${baselinePercentage}%`} stopColor={positiveColor} />
-            <stop offset="100%" stopColor={positiveColor} />
-          </linearGradient>
-          <linearGradient
-            gradientUnits="userSpaceOnUse"
-            id={`${gradientId}-gradient`}
-            x1="0%"
-            x2="0%"
-            y1={range[0]}
-            y2={range[1]}
-          >
-            <stop offset="0%" stopColor={negativeColor} stopOpacity={0.3} />
-            <stop offset={`${baselinePercentage}%`} stopColor={negativeColor} stopOpacity={0} />
-            <stop offset={`${baselinePercentage}%`} stopColor={positiveColor} stopOpacity={0} />
-            <stop offset="100%" stopColor={positiveColor} stopOpacity={0.3} />
-          </linearGradient>
-        </defs>
-      );
-    }
-
-    return null;
-  };
-
-  const solidColor = `url(#${gradientId}-solid)`;
-
-  return (
-    <CartesianChart
-      enableScrubbing
-      height={{ base: 150, tablet: 200, desktop: 250 }}
-      series={[
-        {
-          id: 'prices',
-          data: data,
-          color: solidColor,
-        },
-      ]}
-      padding={{ top: 1.5, bottom: 1.5, left: 2, right: 0 }}
-    >
-      <ChartDefs />
-      <YAxis requestedTickCount={2} showGrid tickLabelFormatter={priceFormatter} />
-      <Area seriesId="prices" curve="monotone" fill={`url(#${gradientId}-gradient)`} />
-      <Line strokeWidth={3} curve="monotone" seriesId="prices" stroke={solidColor} />
-      <Scrubber hideOverlay />
-    </CartesianChart>
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      return `${pages[index]} has ${pageViews[index]} views and ${uniqueVisitors[index]} unique visitors.`;
+    },
+    [pages, pageViews, uniqueVisitors],
   );
-}
-```
-
-### Multiple Series
-
-You can add multiple series to a line chart.
-
-```jsx live
-function MultipleSeriesChart() {
-  const [scrubIndex, setScrubIndex] = useState(undefined);
 
-  const prices = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
-  const volume = [4, 8, 11, 15, 16, 14, 16, 10, 12, 14, 16, 14, 16, 10];
+  const numberFormatter = useCallback(
+    (value: number) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value),
+    [],
+  );
 
   return (
     <LineChart
       enableScrubbing
-      height={{ base: 150, tablet: 200, desktop: 250 }}
+      showArea
+      showXAxis
+      showYAxis
+      accessibilityLabel={chartAccessibilityLabel}
+      height={{ base: 200, tablet: 225, desktop: 250 }}
       series={[
         {
-          id: 'prices',
-          data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
-          label: 'Prices',
-          color: 'var(--color-accentBoldBlue)',
+          id: 'pageViews',
+          data: pageViews,
+          color: 'var(--color-accentBoldGreen)',
+          // Label will render next to scrubber beacon
+          label: 'Page Views',
         },
         {
-          id: 'volume',
-          data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14, 16, 14, 16, 10],
-          label: 'Volume',
-          color: 'var(--color-accentBoldGreen)',
+          id: 'uniqueVisitors',
+          data: uniqueVisitors,
+          color: 'var(--color-accentBoldPurple)',
+          label: 'Unique Visitors',
+          // Default area is gradient
+          areaType: 'dotted',
         },
       ]}
-      showYAxis
+      xAxis={{
+        // Used on the x-axis to provide context for each index from the series data array
+        data: pages,
+      }}
       yAxis={{
-        domain: {
-          min: 0,
-        },
         showGrid: true,
+        tickLabelFormatter: numberFormatter,
       }}
-      curve="monotone"
     >
-      <Scrubber />
+      <Scrubber accessibilityLabel={scrubberAccessibilityLabel} />
     </LineChart>
   );
 }
 ```
 
-### Points
+### Data
 
-You can use the `renderPoints` prop to dynamically show points on a line.
+The data array for each series defines the y values for that series. You can adjust the y values for a series of data by setting the `data` prop on the xAxis.
 
 ```jsx live
-function PointsChart() {
-  const keyMarketShiftIndices = [4, 6, 7, 9, 10];
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+function DataFormat() {
+  const yData = useMemo(() => [2, 5.5, 2, 8.5, 1.5, 5], []);
+  const xData = useMemo(() => [1, 2, 3, 5, 8, 10], []);
+
+  const chartAccessibilityLabel = `Chart with custom X and Y data. ${yData.length} data points`;
+
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      return `Point ${index + 1}: X value ${xData[index]}, Y value ${yData[index]}`;
+    },
+    [xData, yData],
+  );
 
   return (
-    <CartesianChart
-      height={{ base: 150, tablet: 200, desktop: 250 }}
+    <LineChart
+      enableScrubbing
+      showArea
+      showXAxis
+      showYAxis
+      accessibilityLabel={chartAccessibilityLabel}
+      curve="natural"
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      inset={{ top: 16, right: 16, bottom: 0, left: 0 }}
+      points
       series={[
         {
-          id: 'prices',
-          data: data,
+          id: 'line',
+          data: yData,
         },
       ]}
+      xAxis={{ data: xData, showLine: true, showTickMarks: true, showGrid: true }}
+      yAxis={{
+        domain: { min: 0 },
+        position: 'left',
+        showLine: true,
+        showTickMarks: true,
+        showGrid: true,
+      }}
     >
-      <Area seriesId="prices" curve="monotone" fill="rgb(var(--blue5))" />
-      <Line
-        seriesId="prices"
-        renderPoints={({ dataX, dataY, ...props }) =>
-          keyMarketShiftIndices.includes(dataX)
-            ? {
-                ...props,
-                strokeWidth: 2,
-                stroke: 'var(--color-bg)',
-                radius: 5,
-                onClick: () =>
-                  alert(
-                    `You have clicked a key market shift at position ${dataX + 1} with value ${dataY}!`,
-                  ),
-                accessibilityLabel: `Key market shift point at position ${dataX + 1}, value ${dataY}. Click to view details.`,
-              }
-            : false
-        }
-        curve="monotone"
-      />
-    </CartesianChart>
+      <Scrubber hideOverlay accessibilityLabel={scrubberAccessibilityLabel} />
+    </LineChart>
   );
 }
 ```
 
-### Empty State
-
-This example shows how to use an empty state for a line chart.
-
-```jsx live
-<LineChart
-  series={[
-    {
-      id: 'line',
-      color: 'rgb(var(--gray50))',
-      data: [1, 1],
-      showArea: true,
-    },
-  ]}
-  yAxis={{ domain: { min: -1, max: 3 } }}
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-/>
-```
-
-### Line Styles
+#### Live Updates
 
-```jsx live
-<LineChart
-  height={{ base: 150, tablet: 200, desktop: 250 }}
-  series={[
-    {
-      id: 'top',
-      data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38],
-    },
-    {
-      id: 'upperMiddle',
-      data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
-      color: '#ef4444',
-      type: 'dotted',
-    },
-    {
-      id: 'lowerMiddle',
-      data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
-      color: '#f59e0b',
-      curve: 'natural',
-      LineComponent: (props) => (
-        <GradientLine {...props} endColor="#F7931A" startColor="#E3D74D" strokeWidth={4} />
-      ),
-    },
-    {
-      id: 'bottom',
-      data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
-      color: '#800080',
-      curve: 'step',
-      AreaComponent: DottedArea,
-      showArea: true,
-    },
-  ]}
-/>
-```
+You can change the data passed in via `series` prop to update the chart.
 
-### Live Data
+You can also use the `useRef` hook to reference the scrubber and pulse it on each update.
 
 ```jsx live
-function LiveAssetPrice() {
-  const scrubberRef = useRef(null);
-  const [scrubIndex, setScrubIndex] = useState(undefined);
+function LiveUpdates() {
+  const scrubberRef = useRef<ScrubberRef>(null);
 
   const initialData = useMemo(() => {
     return sparklineInteractiveData.hour.map((d) => d.value);
@@ -461,19 +206,25 @@ function LiveAssetPrice() {
     return () => clearInterval(priceUpdateInterval);
   }, [intervalSeconds, maxPercentChange]);
 
-  const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === undefined)
-      return `Bitcoin Price: $${priceData[priceData.length - 1].toFixed(2)}`;
-    const price = priceData[scrubIndex];
-    return `Bitcoin Price: $${price.toFixed(2)} at position ${scrubIndex + 1}`;
-  }, [scrubIndex, priceData]);
+  const chartAccessibilityLabel = useMemo(() => {
+    return `Live Bitcoin price chart. Current price: $${priceData[priceData.length - 1].toFixed(2)}`;
+  }, [priceData]);
+
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      const price = priceData[index];
+      return `Bitcoin price at position ${index + 1}: $${price.toFixed(2)}`;
+    },
+    [priceData],
+  );
 
   return (
     <LineChart
       enableScrubbing
-      onScrubberPositionChange={setScrubIndex}
       showArea
-      height={{ base: 150, tablet: 200, desktop: 250 }}
+      accessibilityLabel={chartAccessibilityLabel}
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      inset={{ right: 64 }}
       series={[
         {
           id: 'btc',
@@ -481,154 +232,1030 @@ function LiveAssetPrice() {
           color: assets.btc.color,
         },
       ]}
-      inset={{ right: 64 }}
-      accessibilityLabel={accessibilityLabel}
     >
-      <Scrubber ref={scrubberRef} labelProps={{ elevation: 1 }} />
+      <Scrubber
+        ref={scrubberRef}
+        accessibilityLabel={scrubberAccessibilityLabel}
+      />
     </LineChart>
   );
 }
 ```
 
-### Data Format
+#### Missing Data
 
-You can adjust the y values for a series of data by setting the `data` prop on the xAxis.
+By default, null values in data create gaps in a line. Use `connectNulls` to skip null values and draw a continuous line.
+Note that scrubber beacons and points are still only shown at non-null data values.
 
 ```jsx live
-function DataFormatChart() {
-  const [scrubIndex, setScrubIndex] = useState(undefined);
-
-  const yData = [2, 5.5, 2, 8.5, 1.5, 5];
-  const xData = [1, 2, 3, 5, 8, 10];
+function MissingData() {
+  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
+  const pageViews = [2400, 1398, null, 3908, 4800, 3800, 4300];
+  const uniqueVisitors = [4000, 3000, null, 2780, 1890, 2390, 3490];
 
-  const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === undefined) return undefined;
-    return `X: ${xData[scrubIndex]}, Y: ${yData[scrubIndex]} at point ${scrubIndex + 1}`;
-  }, [scrubIndex, xData, yData]);
+  const numberFormatter = useCallback(
+    (value: number) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value),
+    [],
+  );
 
   return (
     <LineChart
       enableScrubbing
-      onScrubberPositionChange={setScrubIndex}
+      showArea
+      showXAxis
+      showYAxis
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      // You can render points at every valid data point by always returning true
+      points
       series={[
         {
-          id: 'line',
-          data: yData,
+          id: 'pageViews',
+          data: pageViews,
+          color: 'var(--color-accentBoldGreen)',
+          // Label will render next to scrubber beacon
+          label: 'Page Views',
+          connectNulls: true,
+        },
+        {
+          id: 'uniqueVisitors',
+          data: uniqueVisitors,
+          color: 'var(--color-accentBoldPurple)',
+          label: 'Unique Visitors',
         },
       ]}
-      height={{ base: 150, tablet: 200, desktop: 250 }}
+      xAxis={{
+        // Used on the x-axis to provide context for each index from the series data array
+        data: pages,
+      }}
+      yAxis={{
+        showGrid: true,
+        tickLabelFormatter: numberFormatter,
+      }}
+    >
+      {/* We can offset the overlay to account for the points being drawn on the lines */}
+      <Scrubber overlayOffset={6} />
+    </LineChart>
+  );
+}
+```
+
+##### Empty State
+
+```jsx live
+<LineChart
+  height={{ base: 200, tablet: 225, desktop: 250 }}
+  series={[
+    {
+      id: 'line',
+      color: 'rgb(var(--gray50))',
+      data: [1, 1],
+      showArea: true,
+    },
+  ]}
+  yAxis={{ domain: { min: -1, max: 3 } }}
+/>
+```
+
+#### Scales
+
+LineChart uses `linear` scaling on axes by default, but you can also use other types, such as `log`. See [XAxis](/components/graphs/XAxis) and [YAxis](/components/graphs/YAxis) for more information.
+
+```jsx live
+<LineChart
+  showArea
+  showYAxis
+  height={{ base: 200, tablet: 225, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  yAxis={{
+    scaleType: 'log',
+    showGrid: true,
+    ticks: [1, 10, 100],
+  }}
+/>
+```
+
+### Interaction
+
+Charts have built in functionality enabled through scrubbing, which can be used by setting `enableScrubbing` to true. You can listen to value changes through `onScrubberPositionChange`. Adding `Scrubber` to LineChart showcases the current scrubber position.
+
+```jsx live
+function Interaction() {
+  const [scrubberPosition, setScrubberPosition] = useState<number | undefined>();
+
+  return (
+    <VStack gap={2}>
+      <Text font="label1">
+        {scrubberPosition !== undefined
+          ? `Scrubber position: ${scrubberPosition}`
+          : 'Not scrubbing'}
+      </Text>
+      <LineChart
+        enableScrubbing
+        showArea
+        height={{ base: 200, tablet: 225, desktop: 250 }}
+        onScrubberPositionChange={setScrubberPosition}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          },
+        ]}
+      >
+        <Scrubber />
+      </LineChart>
+    </VStack>
+  );
+}
+```
+
+#### Points
+
+You can use `points` from LineChart with `onClick` listeners to render instances of [Point](/components/graphs/Point) that are interactable.
+
+```jsx live
+function Points() {
+  const keyMarketShiftIndices = [4, 6, 7, 9, 10];
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+
+  return (
+    <CartesianChart
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      series={[
+        {
+          id: 'prices',
+          data: data,
+        },
+      ]}
+    >
+      <Area fill="rgb(var(--blue5))" seriesId="prices" />
+      <Line
+        points={({ dataX, dataY, ...props }) =>
+          keyMarketShiftIndices.includes(dataX)
+            ? {
+                ...props,
+                strokeWidth: 2,
+                stroke: 'var(--color-bg)',
+                radius: 5,
+                onClick: () =>
+                  alert(
+                    `You have clicked a key market shift at position ${dataX + 1} with value ${dataY}!`,
+                  ),
+                accessibilityLabel: `Key market shift point at position ${dataX + 1}, value ${dataY}. Click to view details.`,
+              }
+            : false
+        }
+        seriesId="prices"
+      />
+    </CartesianChart>
+  );
+}
+```
+
+### Animations
+
+You can configure chart transitions using `transition` on LineChart and `beaconTransitions` on [Scrubber](/components/graphs/Scrubber). You can also disable animations by setting the `animate` on LineChart to `false`.
+
+```jsx live
+function Transitions() {
+  const dataCount = 20;
+  const maxDataOffset = 15000;
+  const minStepOffset = 2500;
+  const maxStepOffset = 10000;
+  const domainLimit = 20000;
+  const updateInterval = 500;
+
+  const myTransitionConfig = { type: 'spring', stiffness: 700, damping: 20 };
+  const negativeColor = 'rgb(var(--gray15))';
+  const positiveColor = 'var(--color-fgPositive)';
+
+  function generateNextValue(previousValue: number) {
+    const range = maxStepOffset - minStepOffset;
+    const offset = Math.random() * range + minStepOffset;
+
+    let direction;
+    if (previousValue >= maxDataOffset) {
+      direction = -1;
+    } else if (previousValue <= -maxDataOffset) {
+      direction = 1;
+    } else {
+      direction = Math.random() < 0.5 ? -1 : 1;
+    }
+
+    let newValue = previousValue + offset * direction;
+    newValue = Math.max(-maxDataOffset, Math.min(maxDataOffset, newValue));
+    return newValue;
+  }
+
+  function generateInitialData() {
+    const data = [];
+
+    let previousValue = Math.random() * 2 * maxDataOffset - maxDataOffset;
+    data.push(previousValue);
+
+    for (let i = 1; i < dataCount; i++) {
+      const newValue = generateNextValue(previousValue);
+      data.push(newValue);
+      previousValue = newValue;
+    }
+
+    return data;
+  }
+
+  const MyGradient = memo((props: DottedAreaProps) => {
+    const areaGradient = {
+      stops: ({ min, max }: AxisBounds) => [
+        { offset: min, color: negativeColor, opacity: 1 },
+        { offset: 0, color: negativeColor, opacity: 0 },
+        { offset: 0, color: positiveColor, opacity: 0 },
+        { offset: max, color: positiveColor, opacity: 1 },
+      ],
+    };
+
+    return <DottedArea {...props} gradient={areaGradient} />;
+  });
+
+  function CustomTransitionsChart() {
+    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 tickLabelFormatter = useCallback(
+      (value: number) =>
+        new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+          maximumFractionDigits: 0,
+        }).format(value),
+      [],
+    );
+
+    const valueAtIndexFormatter = useCallback(
+      (dataIndex: number) =>
+        new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+        }).format(data[dataIndex]),
+      [data],
+    );
+
+    const lineGradient = {
+      stops: [
+        { offset: 0, color: negativeColor },
+        { offset: 0, color: positiveColor },
+      ],
+    };
+
+    return (
+      <CartesianChart
+        enableScrubbing
+        height={{ base: 200, tablet: 250, desktop: 300 }}
+        inset={{ top: 32, bottom: 32, left: 16, right: 16 }}
+        series={[
+          {
+            id: 'prices',
+            data: data,
+            gradient: lineGradient,
+          },
+        ]}
+        yAxis={{ domain: { min: -domainLimit, max: domainLimit } }}
+      >
+        <YAxis showGrid requestedTickCount={2} tickLabelFormatter={tickLabelFormatter} />
+        <Line
+          showArea
+          AreaComponent={MyGradient}
+          seriesId="prices"
+          strokeWidth={3}
+          transition={myTransitionConfig}
+        />
+        <Scrubber
+          hideOverlay
+          beaconTransitions={{ update: myTransitionConfig }}
+          label={valueAtIndexFormatter}
+        />
+      </CartesianChart>
+    );
+  }
+
+  return <CustomTransitionsChart />;
+}
+```
+
+### Accessibility
+
+You can use `accessibilityLabel` on both the chart and the scrubber to provide descriptive labels. The chart's label gives an overview, while the scrubber's label provides specific information about the current data point being viewed.
+
+```jsx live
+function BasicAccessible() {
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+
+  // Chart-level accessibility label provides overview
+  const chartAccessibilityLabel = useMemo(() => {
+    const currentPrice = data[data.length - 1];
+    return `Price chart showing trend over ${data.length} data points. Current value: ${currentPrice}. Use arrow keys to adjust view`;
+  }, [data]);
+
+  // Scrubber-level accessibility label provides specific position info
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      return `Price at position ${index + 1} of ${data.length}: ${data[index]}`;
+    },
+    [data],
+  );
+
+  return (
+    <LineChart
+      enableScrubbing
       showArea
-      renderPoints={() => true}
-      curve="natural"
-      showXAxis
-      xAxis={{ data: xData, showLine: true, showTickMarks: true, showGrid: true }}
       showYAxis
+      accessibilityLabel={chartAccessibilityLabel}
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      series={[
+        {
+          id: 'prices',
+          data: data,
+        },
+      ]}
       yAxis={{
-        domain: { min: 0 },
-        position: 'left',
-        showLine: true,
-        showTickMarks: true,
         showGrid: true,
       }}
-      inset={{ top: 16, right: 16, bottom: 0, left: 0 }}
-      accessibilityLabel={accessibilityLabel}
     >
-      <Scrubber hideOverlay />
+      <Scrubber accessibilityLabel={scrubberAccessibilityLabel} />
+    </LineChart>
+  );
+}
+```
+
+When a chart has a visible header or title, you can use `aria-labelledby` to reference it, and still provide a dynamic scrubber accessibility label.
+
+```jsx live
+function AccessibleWithHeader() {
+  const headerId = useId();
+  const data = useMemo(() => [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58], []);
+
+  // Display label provides overview
+  const displayLabel = useMemo(
+    () => `Revenue chart showing trend. Current value: ${data[data.length - 1]}`,
+    [data],
+  );
+
+  // Scrubber-specific accessibility label
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      return `Viewing position ${index + 1} of ${data.length}, value: ${data[index]}`;
+    },
+    [data],
+  );
+
+  return (
+    <VStack gap={2}>
+      <Text font="label1" id={headerId}>
+        {displayLabel}
+      </Text>
+      <LineChart
+        enableScrubbing
+        showArea
+        showYAxis
+        aria-labelledby={headerId}
+        height={{ base: 200, tablet: 225, desktop: 250 }}
+        series={[
+          {
+            id: 'revenue',
+            data: data,
+          },
+        ]}
+        yAxis={{
+          showGrid: true,
+        }}
+      >
+        <Scrubber accessibilityLabel={scrubberAccessibilityLabel} />
+      </LineChart>
+    </VStack>
+  );
+}
+```
+
+### Styling
+
+#### Axes
+
+Using `showXAxis` and `showYAxis` allows you to display the axes. For more information, such as adjusting domain and range, see [XAxis](/components/graphs/XAxis) and [YAxis](/components/graphs/YAxis).
+
+```jsx live
+<LineChart
+  showArea
+  showXAxis
+  showYAxis
+  height={{ base: 200, tablet: 225, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  xAxis={{
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+    tickLabelFormatter: (dataX: number) => `Day ${dataX}`,
+  }}
+  yAxis={{
+    showGrid: true,
+    showLine: true,
+    showTickMarks: true,
+  }}
+/>
+```
+
+#### Gradients
+
+Gradients can be applied to the y-axis (default) or x-axis. 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 Gradients() {
+  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 flexWrap="wrap" gap={1} justifyContent="flex-end">
+        {spectrumColors.map((color) => (
+          <Pressable
+            key={color}
+            accessibilityLabel={`Select ${color}`}
+            borderRadius={1000}
+            height={{ base: 16, tablet: 24, desktop: 24 }}
+            onClick={() => setCurrentSpectrumColor(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 }}
+          />
+        ))}
+      </HStack>
+      <LineChart
+        showYAxis
+        height={{ base: 200, tablet: 225, desktop: 250 }}
+        points
+        series={[
+          {
+            id: 'continuousGradient',
+            data: data,
+            gradient: {
+              stops: [
+                { offset: 0, color: `rgb(var(--${currentSpectrumColor}80))` },
+                { offset: Math.max(...data), color: `rgb(var(--${currentSpectrumColor}20))` },
+              ],
+            },
+          },
+          {
+            id: 'discreteGradient',
+            data: data.map((d) => d + 50),
+            // You can create a "discrete" gradient by having multiple stops at the same offset
+            gradient: {
+              stops: ({ min, max }) => [
+                // Allows a function which accepts min/max or direct array
+                { 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))` },
+              ],
+            },
+          },
+          {
+            id: 'xAxisGradient',
+            data: data.map((d) => d + 100),
+            gradient: {
+              // You can also configure by the x-axis.
+              axis: 'x',
+              stops: ({ min, max }) => [
+                { offset: min, color: `rgb(var(--${currentSpectrumColor}80))`, opacity: 0 },
+                { offset: max, color: `rgb(var(--${currentSpectrumColor}20))`, opacity: 1 },
+              ],
+            },
+          },
+        ]}
+        strokeWidth={4}
+        yAxis={{
+          showGrid: true,
+        }}
+      />
+    </VStack>
+  );
+}
+```
+
+You can even pass in a separate gradient for your `Line` and `Area` components.
+
+```jsx live
+function GainLossChart() {
+  const data = useMemo(() => [-40, -28, -21, -5, 48, -5, -28, 2, -29, -46, 16, -30, -29, 8], []);
+  const negativeColor = 'rgb(var(--gray15))';
+  const positiveColor = 'var(--color-fgPositive)';
+
+  const tickLabelFormatter = useCallback(
+    (value: number) =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 0,
+      }).format(value),
+    [],
+  );
+
+  // Line gradient: hard color change at 0 (full opacity for line)
+  const lineGradient = {
+    stops: [
+      { offset: 0, color: negativeColor },
+      { offset: 0, color: positiveColor },
+    ],
+  };
+
+  const chartAccessibilityLabel = `Gain/Loss chart showing price changes. Current value: ${tickLabelFormatter(data[data.length - 1])}`;
+
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      const value = data[index];
+      const status = value >= 0 ? 'gain' : 'loss';
+      return `Position ${index + 1} of ${data.length}: ${tickLabelFormatter(value)} ${status}`;
+    },
+    [data, tickLabelFormatter],
+  );
+
+  const GradientDottedArea = memo((props: DottedAreaProps) => (
+    <DottedArea
+      {...props}
+      gradient={{
+        stops: ({ min, max }) => [
+          { offset: min, color: negativeColor, opacity: 0.4 },
+          { offset: 0, color: negativeColor, opacity: 0 },
+          { offset: 0, color: positiveColor, opacity: 0 },
+          { offset: max, color: positiveColor, opacity: 0.4 },
+        ],
+      }}
+    />
+  ));
+
+  return (
+    <CartesianChart
+      enableScrubbing
+      accessibilityLabel={chartAccessibilityLabel}
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      series={[
+        {
+          id: 'prices',
+          data: data,
+          gradient: lineGradient,
+        },
+      ]}
+      xAxis={{
+        range: ({ min, max }) => ({ min, max: max - 16 }),
+      }}
+    >
+      <YAxis showGrid requestedTickCount={2} tickLabelFormatter={tickLabelFormatter} />
+      <Line showArea AreaComponent={GradientDottedArea} seriesId="prices" strokeWidth={3} />
+      <Scrubber hideOverlay accessibilityLabel={scrubberAccessibilityLabel} />
+    </CartesianChart>
+  );
+}
+```
+
+#### Lines
+
+You can customize lines by placing props in `LineChart` or at each individual series. Lines can have a `type` of `solid` or `dotted`. They can optionally show an area underneath them (using `showArea`).
+
+```jsx live
+<LineChart
+  height={{ base: 200, tablet: 225, desktop: 250 }}
+  series={[
+    {
+      id: 'top',
+      data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38],
+    },
+    {
+      id: 'upperMiddle',
+      data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
+      color: '#ef4444',
+      type: 'dotted',
+    },
+    {
+      id: 'lowerMiddle',
+      data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
+      color: '#f59e0b',
+      curve: 'natural',
+      gradient: {
+        axis: 'x',
+        stops: [
+          { offset: 0, color: '#E3D74D' },
+          { offset: 9, color: '#F7931A' },
+        ],
+      },
+      strokeWidth: 6,
+    },
+    {
+      id: 'bottom',
+      data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
+      color: '#800080',
+      curve: 'step',
+      AreaComponent: DottedArea,
+      showArea: true,
+    },
+  ]}
+/>
+```
+
+You can also add instances of [ReferenceLine](/components/graphs/ReferenceLine) to your LineChart to highlight a specific x or y value.
+
+```jsx live
+<LineChart
+  enableScrubbing
+  showArea
+  height={{ base: 200, tablet: 225, desktop: 250 }}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+      color: 'var(--color-fgPositive)',
+    },
+  ]}
+  xAxis={{
+    // Give space before the end of the chart for the scrubber
+    range: ({ min, max }) => ({ min, max: max - 24 }),
+  }}
+>
+  <ReferenceLine
+    LineComponent={(props) => <DottedLine {...props} strokeDasharray="0 16" strokeWidth={3} />}
+    dataY={10}
+    stroke="var(--color-fg)"
+  />
+  <Scrubber />
+</LineChart>
+```
+
+#### Points
+
+You can also add instances of [Point](/components/graphs/Point) directly inside of a LineChart.
+
+```jsx live
+function HighLowPrice() {
+  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+  const minPrice = Math.min(...data);
+  const maxPrice = Math.max(...data);
+
+  const minPriceIndex = data.indexOf(minPrice);
+  const maxPriceIndex = data.indexOf(maxPrice);
+
+  const formatPrice = useCallback((price: number) => {
+    return `$${price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  }, []);
+
+  return (
+    <LineChart
+      showArea
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      series={[
+        {
+          id: 'prices',
+          data: data,
+        },
+      ]}
+    >
+      <Point
+        dataX={minPriceIndex}
+        dataY={minPrice}
+        label={formatPrice(minPrice)}
+        labelPosition="bottom"
+      />
+      <Point
+        dataX={maxPriceIndex}
+        dataY={maxPrice}
+        label={formatPrice(maxPrice)}
+        labelPosition="top"
+      />
     </LineChart>
   );
 }
 ```
 
-### Accessibility
+#### Scrubber
+
+When using [Scrubber](/components/graphs/Scrubber) with series that have labels, labels will automatically render to the side of the scrubber beacon.
 
-You can use `accessibilityLabel` to provide a descriptive label for the chart. This is especially important for charts with scrubbing enabled, where the label should update dynamically to reflect the current data point.
+You can customize the line used for and which series will render a scrubber beacon.
+
+You can have scrubber beacon's pulse by either adding `idlePulse` to Scrubber or use Scrubber's ref to dynamically pulse.
 
 ```jsx live
-function AccessibleBasicChart() {
-  const [scrubIndex, setScrubIndex] = useState(undefined);
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+function StylingScrubber() {
+  const pages = ['Page A', 'Page B', 'Page C', 'Page D', 'Page E', 'Page F', 'Page G'];
+  const pageViews = [2400, 1398, 9800, 3908, 4800, 3800, 4300];
+  const uniqueVisitors = [4000, 3000, 2000, 2780, 1890, 2390, 3490];
 
-  const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === undefined) {
-      return `Current price: ${data[data.length - 1]}`;
-    }
-    return `Price at position ${scrubIndex + 1}: ${data[scrubIndex]}`;
-  }, [scrubIndex, data]);
+  const numberFormatter = useCallback(
+    (value: number) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(value),
+    [],
+  );
 
   return (
     <LineChart
       enableScrubbing
-      onScrubberPositionChange={setScrubIndex}
-      height={{ base: 150, tablet: 200, desktop: 250 }}
+      showArea
+      showXAxis
+      showYAxis
+      height={{ base: 200, tablet: 225, desktop: 250 }}
       series={[
         {
-          id: 'prices',
-          data: data,
+          id: 'pageViews',
+          data: pageViews,
+          color: 'var(--color-accentBoldGreen)',
+          // Label will render next to scrubber beacon
+          label: 'Page Views',
+        },
+        {
+          id: 'uniqueVisitors',
+          data: uniqueVisitors,
+          color: 'var(--color-accentBoldPurple)',
+          label: 'Unique Visitors',
+          // Default area is gradient
+          areaType: 'dotted',
         },
       ]}
-      curve="monotone"
-      showYAxis
-      showArea
+      xAxis={{
+        // Used on the x-axis to provide context for each index from the series data array
+        data: pages,
+      }}
       yAxis={{
         showGrid: true,
+        tickLabelFormatter: numberFormatter,
       }}
-      accessibilityLabel={accessibilityLabel}
     >
-      <Scrubber />
+      <Scrubber idlePulse LineComponent={SolidLine} seriesIds={['pageViews']} />
     </LineChart>
   );
 }
 ```
 
-When a chart has a visible header or title, you can use `aria-labelledby` to reference it.
+#### Sizing
+
+Charts by default take up `100%` of the `width` and `height` available, but can be customized as any other component.
 
 ```jsx live
-function AccessibleChartWithHeader() {
-  const headerId = useId();
-  const [scrubIndex, setScrubIndex] = useState(undefined);
-  const data = [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58];
+function DynamicChartSizing() {
+  const candles = [...btcCandles].reverse();
+  const prices = candles.map((candle) => parseFloat(candle.close));
+  const highs = candles.map((candle) => parseFloat(candle.high));
+  const lows = candles.map((candle) => parseFloat(candle.low));
 
-  const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === undefined) {
-      return `Line chart showing price trend. Current value: ${data[data.length - 1]}`;
+  const latestPrice = prices[prices.length - 1];
+  const previousPrice = prices[prices.length - 2];
+  const change24h = ((latestPrice - previousPrice) / previousPrice) * 100;
+
+  function DetailCell({ title, description }: { title: string; description: string }) {
+    return (
+      <VStack>
+        <Text color="fgMuted" font="label2">
+          {title}
+        </Text>
+        <Text font="headline">{description}</Text>
+      </VStack>
+    );
+  }
+
+  // Calculate 7-day moving average
+  const calculateMA = (data: number[], period: number): number[] => {
+    const ma: number[] = [];
+    for (let i = 0; i < data.length; i++) {
+      if (i >= period - 1) {
+        const sum = data.slice(i - period + 1, i + 1).reduce((a, b) => a + b, 0);
+        ma.push(sum / period);
+      }
     }
-    return `Value: ${data[scrubIndex]} at position ${scrubIndex + 1}`;
-  }, [scrubIndex, data]);
+    return ma;
+  };
+
+  const ma7 = calculateMA(prices, 7);
+  const latestMA7: number = ma7[ma7.length - 1];
+
+  const periodHigh = Math.max(...highs);
+  const periodLow = Math.min(...lows);
+
+  const formatPrice = useCallback((price: number) => {
+    return `$${price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  }, []);
+
+  const formatPercentage = useCallback((value: number) => {
+    const sign = value >= 0 ? '+' : '';
+    return `${sign}${value.toFixed(2)}%`;
+  }, []);
 
   return (
-    <VStack gap={2}>
-      <Text id={headerId} font="label1">
-        {accessibilityLabel}
-      </Text>
+    <HStack gap={3}>
+      <Box
+        borderBottomLeftRadius={300}
+        borderTopLeftRadius={300}
+        flexGrow={1}
+        style={{
+          background: 'linear-gradient(0deg, #D07609 0%, #F7931A 100%)',
+          marginTop: 'calc(-1 * var(--space-3))',
+          marginLeft: 'calc(-1 * var(--space-3))',
+          marginBottom: 'calc(-1 * var(--space-3))',
+        }}
+      >
+        {/* LineChart fills to take up available width and height */}
+        <LineChart
+          series={[
+            {
+              id: 'btc',
+              data: prices,
+              color: 'white',
+            },
+          ]}
+        />
+      </Box>
+      <VStack gap={1}>
+        <VStack>
+          <Text font="title1">BTC</Text>
+          <Text font="title2">{formatPrice(latestPrice)}</Text>
+        </VStack>
+        <DetailCell description={formatPrice(periodHigh)} title="High" />
+        <DetailCell description={formatPrice(periodLow)} title="Low" />
+        <VStack display={{ base: 'none', tablet: 'flex', desktop: 'flex' }} gap={1}>
+          <DetailCell description={formatPercentage(change24h)} title="24h" />
+          <DetailCell description={formatPrice(latestMA7)} title="7d MA" />
+        </VStack>
+      </VStack>
+    </HStack>
+  );
+}
+```
+
+##### Compact
+
+You can also have charts in a compact form.
+
+```jsx live
+function Compact() {
+  const dimensions = { width: 62, height: 18 };
+
+  const sparklineData = prices
+    .map((price) => parseFloat(price))
+    .filter((price, index) => index % 10 === 0);
+  const positiveFloor = Math.min(...sparklineData) - 10;
+
+  const negativeData = sparklineData.map((price) => -1 * price).reverse();
+  const negativeCeiling = Math.max(...negativeData) + 10;
+
+  const formatPrice = useCallback((price: number) => {
+    return `$${price.toLocaleString('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    })}`;
+  }, []);
+
+  type CompactChartProps = {
+    data: number[];
+    showArea?: boolean;
+    color?: string;
+    referenceY: number;
+  };
+
+  const CompactChart = memo(({ data, showArea, color, referenceY }: CompactChartProps) => (
+    <Box style={{ padding: 1 }}>
       <LineChart
-        enableScrubbing
-        onScrubberPositionChange={setScrubIndex}
-        height={{ base: 150, tablet: 200, desktop: 250 }}
+        {...dimensions}
+        enableScrubbing={false}
+        inset={0}
         series={[
           {
-            id: 'revenue',
-            data: data,
+            id: 'btc',
+            data,
+            color,
           },
         ]}
-        curve="monotone"
-        showYAxis
-        showArea
-        yAxis={{
-          showGrid: true,
-        }}
-        aria-labelledby={headerId}
+        showArea={showArea}
       >
-        <Scrubber />
+        <ReferenceLine dataY={referenceY} />
       </LineChart>
+    </Box>
+  ));
+
+  const ChartCell = memo(
+    ({
+      data,
+      showArea,
+      color,
+      referenceY,
+      subdetail,
+    }: CompactChartProps & { subdetail: string }) => {
+      const { isPhone } = useBreakpoints();
+
+      return (
+        <ListCell
+          description={isPhone ? undefined : assets.btc.symbol}
+          detail={formatPrice(parseFloat(prices[0]))}
+          intermediary={
+            <CompactChart color={color} data={data} referenceY={referenceY} showArea={showArea} />
+          }
+          media={<Avatar src={assets.btc.imageUrl} />}
+          onClick={() => console.log('clicked')}
+          spacingVariant="condensed"
+          style={{ padding: 0 }}
+          subdetail={subdetail}
+          title={isPhone ? undefined : assets.btc.name}
+        />
+      );
+    },
+  );
+
+  return (
+    <VStack>
+      <ChartCell
+        color={assets.btc.color}
+        data={sparklineData}
+        referenceY={parseFloat(prices[Math.floor(prices.length / 4)])}
+        subdetail="-4.55%"
+      />
+      <ChartCell
+        showArea
+        color={assets.btc.color}
+        data={sparklineData}
+        referenceY={parseFloat(prices[Math.floor(prices.length / 4)])}
+        subdetail="-4.55%"
+      />
+      <ChartCell
+        showArea
+        color="var(--color-fgPositive)"
+        data={sparklineData}
+        referenceY={positiveFloor}
+        subdetail="+0.25%"
+      />
+      <ChartCell
+        showArea
+        color="var(--color-fgNegative)"
+        data={negativeData}
+        referenceY={negativeCeiling}
+        subdetail="-4.55%"
+      />
     </VStack>
   );
 }
 ```
 
-### Customization
+### Composed Examples
 
 #### Asset Price with Dotted Area
 
+You can use [PeriodSelector](/components/graphs/PeriodSelector) to have a chart where the user can select a time period and the chart automatically animates.
+
 ```jsx live
 function AssetPriceWithDottedArea() {
   const BTCTab: TabComponent = memo(
@@ -657,7 +1284,7 @@ function AssetPriceWithDottedArea() {
     ),
   );
 
-const BTCActiveIndicator = memo(({ style, ...props }: TabsActiveIndicatorProps) => (
+  const BTCActiveIndicator = memo(({ style, ...props }: TabsActiveIndicatorProps) => (
     <PeriodSelectorActiveIndicator
       {...props}
       style={{ ...style, backgroundColor: `${assets.btc.color}1A` }}
@@ -665,200 +1292,50 @@ const BTCActiveIndicator = memo(({ style, ...props }: TabsActiveIndicatorProps)
   ));
 
   const AssetPriceDotted = memo(() => {
-  const [scrubIndex, setScrubIndex] = useState<number | undefined>(undefined);
-  const currentPrice =
-    sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
-  const tabs = [
-    { id: 'hour', label: '1H' },
-    { id: 'day', label: '1D' },
-    { id: 'week', label: '1W' },
-    { id: 'month', label: '1M' },
-    { id: 'year', label: '1Y' },
-    { id: 'all', label: 'All' },
-  ];
-  const [timePeriod, setTimePeriod] = useState<TabValue>(tabs[0]);
-
-  const sparklineTimePeriodData = useMemo(() => {
-    return sparklineInteractiveData[timePeriod.id as keyof typeof sparklineInteractiveData];
-  }, [timePeriod]);
-
-  const sparklineTimePeriodDataValues = useMemo(() => {
-    return sparklineTimePeriodData.map((d) => d.value);
-  }, [sparklineTimePeriodData]);
-
-  const sparklineTimePeriodDataTimestamps = useMemo(() => {
-    return sparklineTimePeriodData.map((d) => d.date);
-  }, [sparklineTimePeriodData]);
-
-  const onPeriodChange = useCallback(
-    (period: TabValue | null) => {
-      setTimePeriod(period || tabs[0]);
-    },
-    [tabs, setTimePeriod],
-  );
-
-  const priceFormatter = useMemo(
-    () =>
-      new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }),
-    [],
-  );
-
-  const scrubberPriceFormatter = useMemo(
-    () =>
-      new Intl.NumberFormat('en-US', {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-      }),
-    [],
-  );
-
-  const formatPrice = useCallback((price: number) => {
-    return priceFormatter.format(price);
-  }, [priceFormatter]);
-
-  const formatDate = useCallback((date: Date) => {
-    const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'short' });
-
-    const monthDay = date.toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-    });
-
-    const time = date.toLocaleTimeString('en-US', {
-      hour: 'numeric',
-      minute: '2-digit',
-      hour12: true,
-    });
-
-    return `${dayOfWeek}, ${monthDay}, ${time}`;
-  }, []);
-
-  const scrubberLabel = useCallback(
-    (index: number) => {
-      const price = scrubberPriceFormatter.format(sparklineTimePeriodDataValues[index]);
-      const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
-      return (
-        <>
-          <tspan style={{ fontWeight: 'bold' }}>{price} USD</tspan> {date}
-        </>
-      );
-    },
-    [scrubberPriceFormatter, sparklineTimePeriodDataValues, sparklineTimePeriodDataTimestamps, formatDate],
-  );
-
-  const accessibilityLabel = useCallback(
-    (index: number) => {
-      const price = scrubberPriceFormatter.format(sparklineTimePeriodDataValues[index]);
-      const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
-      return `${price} USD ${date}`;
-    },
-    [scrubberPriceFormatter, sparklineTimePeriodDataValues, sparklineTimePeriodDataTimestamps, formatDate],
-  );
-
-  return (
-    <VStack gap={2}>
-      <SectionHeader
-        style={{ padding: 0 }}
-        title={<Text font="title1">Bitcoin</Text>}
-        balance={<Text font="title2">{formatPrice(currentPrice)}</Text>}
-        end={
-          <VStack justifyContent="center">
-            <RemoteImage source={assets.btc.imageUrl} size="xl" shape="circle" />
-          </VStack>
-        }
-      />
-      <LineChart
-        overflow="visible"
-        enableScrubbing
-        onScrubberPositionChange={setScrubIndex}
-        series={[
-          {
-            id: 'btc',
-            data: sparklineTimePeriodDataValues,
-            color: assets.btc.color,
-          },
-        ]}
-        showArea
-        areaType="dotted"
-        height={{ base: 150, tablet: 200, desktop: 250 }}
-        style={{ outlineColor: assets.btc.color }}
-        accessibilityLabel={scrubberLabel}
-        padding={{ left: 2, right: 2 }}
-      >
-        <Scrubber label={scrubberLabel} labelProps={{ elevation: 1 }} idlePulse />
-      </LineChart>
-      <PeriodSelector
-        TabComponent={BTCTab}
-        TabsActiveIndicatorComponent={BTCActiveIndicator}
-        tabs={tabs}
-        activeTab={timePeriod}
-        onChange={onPeriodChange}
-      />
-    </VStack>
-  )});
-
-  return <AssetPriceDotted />;
-};
-```
-
-#### Forecast Asset Price
-
-```jsx live
-function ForecastAssetPrice() {
-  const ForecastAreaComponent = memo(
-    (props: AreaComponentProps) => (
-      <DottedArea {...props} peakOpacity={0.4} baselineOpacity={0.4} />
-    ),
-  );
-
-  const ForecastChart = memo(() => {
-    const [scrubIndex, setScrubIndex] = useState<number | undefined>(undefined);
-
-    const getDataFromSparkline = useCallback((startDate: Date) => {
-      const allData = sparklineInteractiveData.all;
-      if (!allData || allData.length === 0) return [];
-
-      const timelineData = allData.filter((point) => point.date >= startDate);
-
-      return timelineData.map((point) => ({
-        date: point.date,
-        value: point.value,
-      }));
-    }, []);
-
-    const historicalData = useMemo(() => getDataFromSparkline(new Date('2019-01-01')), [getDataFromSparkline]);
-
-    const annualGrowthRate = 10;
+    const currentPrice =
+      sparklineInteractiveData.hour[sparklineInteractiveData.hour.length - 1].value;
+    const tabs = useMemo(
+      () => [
+        { id: 'hour', label: '1H' },
+        { id: 'day', label: '1D' },
+        { id: 'week', label: '1W' },
+        { id: 'month', label: '1M' },
+        { id: 'year', label: '1Y' },
+        { id: 'all', label: 'All' },
+      ],
+      [],
+    );
+    const [timePeriod, setTimePeriod] = useState<TabValue>(tabs[0]);
 
-    const generateForecastData = useCallback(
-      (lastDate: Date, lastPrice: number, growthRate: number) => {
-        const dailyGrowthRate = Math.pow(1 + growthRate / 100, 1 / 365) - 1;
-        const forecastData = [];
-        const fiveYearsFromNow = new Date(lastDate);
-        fiveYearsFromNow.setFullYear(fiveYearsFromNow.getFullYear() + 5);
+    const sparklineTimePeriodData = useMemo(() => {
+      return sparklineInteractiveData[timePeriod.id as keyof typeof sparklineInteractiveData];
+    }, [timePeriod]);
 
-        // Generate daily forecast points for 5 years
-        const currentDate = new Date(lastDate);
-        let currentPrice = lastPrice;
+    const sparklineTimePeriodDataValues = useMemo(() => {
+      return sparklineTimePeriodData.map((d) => d.value);
+    }, [sparklineTimePeriodData]);
 
-        while (currentDate <= fiveYearsFromNow) {
-          currentPrice = currentPrice * (1 + dailyGrowthRate * 10);
-          forecastData.push({
-            date: new Date(currentDate),
-            value: Math.round(currentPrice),
-          });
-          currentDate.setDate(currentDate.getDate() + 10);
-        }
+    const sparklineTimePeriodDataTimestamps = useMemo(() => {
+      return sparklineTimePeriodData.map((d) => d.date);
+    }, [sparklineTimePeriodData]);
 
-        return forecastData;
+    const onPeriodChange = useCallback(
+      (period: TabValue | null) => {
+        setTimePeriod(period || tabs[0]);
       },
-      [],
+      [tabs, setTimePeriod],
     );
 
     const priceFormatter = useMemo(
+      () =>
+        new Intl.NumberFormat('en-US', {
+          style: 'currency',
+          currency: 'USD',
+        }),
+      [],
+    );
+
+    const scrubberPriceFormatter = useMemo(
       () =>
         new Intl.NumberFormat('en-US', {
           minimumFractionDigits: 2,
@@ -867,6 +1344,13 @@ function ForecastAssetPrice() {
       [],
     );
 
+    const formatPrice = useCallback(
+      (price: number) => {
+        return priceFormatter.format(price);
+      },
+      [priceFormatter],
+    );
+
     const formatDate = useCallback((date: Date) => {
       const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'short' });
 
@@ -884,250 +1368,253 @@ function ForecastAssetPrice() {
       return `${dayOfWeek}, ${monthDay}, ${time}`;
     }, []);
 
-    const forecastData = useMemo(() => {
-      if (historicalData.length === 0) return [];
-      const lastPoint = historicalData[historicalData.length - 1];
-      return generateForecastData(lastPoint.date, lastPoint.value, annualGrowthRate);
-    }, [generateForecastData, historicalData, annualGrowthRate]);
-
-    // Combine all data points with dates converted to timestamps for x-axis
-    const allDataPoints = useMemo(
-      () => [...historicalData, ...forecastData],
-      [historicalData, forecastData],
-    );
-
-    const historicalDataValues = useMemo(
-      () => historicalData.map((d) => d.value),
-      [historicalData],
-    );
-
-    const forecastDataValues = useMemo(
-      () => [...historicalData.map((d) => null), ...forecastData.map((d) => d.value)],
-      [historicalData, forecastData],
-    );
-
-    const xAxisData = useMemo(
-      () => allDataPoints.map((d) => d.date.getTime()),
-      [allDataPoints],
-    );
-
     const scrubberLabel = useCallback(
       (index: number) => {
-        const price = priceFormatter.format(allDataPoints[index].value);
-        const date = formatDate(allDataPoints[index].date);
+        const price = scrubberPriceFormatter.format(sparklineTimePeriodDataValues[index]);
+        const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
         return (
           <>
             <tspan style={{ fontWeight: 'bold' }}>{price} USD</tspan> {date}
           </>
         );
       },
-      [priceFormatter, allDataPoints, formatDate],
+      [
+        scrubberPriceFormatter,
+        sparklineTimePeriodDataValues,
+        sparklineTimePeriodDataTimestamps,
+        formatDate,
+      ],
     );
 
-    const accessibilityLabel = useCallback(
+    const chartAccessibilityLabel = `Bitcoin price chart for ${timePeriod.label} period. Current price: ${formatPrice(currentPrice)}`;
+
+    const scrubberAccessibilityLabel = useCallback(
       (index: number) => {
-        const price = priceFormatter.format(allDataPoints[index].value);
-        const date = formatDate(allDataPoints[index].date);
+        const price = scrubberPriceFormatter.format(sparklineTimePeriodDataValues[index]);
+        const date = formatDate(sparklineTimePeriodDataTimestamps[index]);
         return `${price} USD ${date}`;
       },
-      [priceFormatter, allDataPoints, formatDate],
+      [
+        scrubberPriceFormatter,
+        sparklineTimePeriodDataValues,
+        sparklineTimePeriodDataTimestamps,
+        formatDate,
+      ],
     );
 
     return (
-      <LineChart
-        overflow="visible"
-        animate={false}
-        enableScrubbing
-        showArea
-        showXAxis
-        AreaComponent={ForecastAreaComponent}
-        height={{ base: 150, tablet: 200, desktop: 250 }}
-        padding={{
-          top: 4,
-          left: 2,
-          right: 2,
-          bottom: 0,
-        }}
-        series={[
-          {
-            id: 'historical',
-            data: historicalDataValues,
-            color: assets.btc.color,
-          },
-          {
-            id: 'forecast',
-            data: forecastDataValues,
-            color: assets.btc.color,
-            type: 'dotted',
-          },
-        ]}
-        xAxis={{
-          data: xAxisData,
-          tickLabelFormatter: (value: number) => {
-            return new Date(value).toLocaleDateString('en-US', {
-              month: 'numeric',
-              year: 'numeric',
-            });
-          },
-          tickInterval: 2,
-        }}
-        accessibilityLabel={accessibilityLabel}
-        style={{ outlineColor: assets.btc.color }}
-      >
-        <Scrubber label={scrubberLabel} labelProps={{ elevation: 1 }} />
-      </LineChart>
+      <VStack gap={2}>
+        <SectionHeader
+          balance={<Text font="title2">{formatPrice(currentPrice)}</Text>}
+          end={
+            <VStack justifyContent="center">
+              <RemoteImage shape="circle" size="xl" source={assets.btc.imageUrl} />
+            </VStack>
+          }
+          style={{ padding: 0 }}
+          title={<Text font="title1">Bitcoin</Text>}
+        />
+        <LineChart
+          enableScrubbing
+          showArea
+          accessibilityLabel={chartAccessibilityLabel}
+          areaType="dotted"
+          height={{ base: 200, tablet: 225, desktop: 250 }}
+          series={[
+            {
+              id: 'btc',
+              data: sparklineTimePeriodDataValues,
+              color: assets.btc.color,
+            },
+          ]}
+          style={{ outlineColor: assets.btc.color }}
+          inset={{ top: 60 }}
+        >
+          <Scrubber
+            idlePulse
+            accessibilityLabel={scrubberAccessibilityLabel}
+            label={scrubberLabel}
+            labelElevated
+          />
+        </LineChart>
+        <PeriodSelector
+          TabComponent={BTCTab}
+          TabsActiveIndicatorComponent={BTCActiveIndicator}
+          activeTab={timePeriod}
+          onChange={onPeriodChange}
+          tabs={tabs}
+        />
+      </VStack>
     );
   });
 
-  return <ForecastChart />;
-};
+  return <AssetPriceDotted />;
+}
 ```
 
-#### Availability
+#### Monotone Asset Price
+
+You can adjust [YAxis](/components/graphs/YAxis) and [Scrubber](/components/graphs/Scrubber) to have a chart where the y-axis is overlaid and the beacon is inverted in style.
 
 ```jsx live
-function AvailabilityChart() {
-  const [scrubIndex, setScrubIndex] = useState(undefined);
+function MonotoneAssetPrice() {
+  const prices = sparklineInteractiveData.hour;
 
-  const availabilityEvents = [
-    {
-      date: new Date('2022-01-01'),
-      availability: 79,
-    },
-    {
-      date: new Date('2022-01-03'),
-      availability: 81,
-    },
-    {
-      date: new Date('2022-01-04'),
-      availability: 82,
-    },
-    {
-      date: new Date('2022-01-06'),
-      availability: 91,
-    },
-    {
-      date: new Date('2022-01-07'),
-      availability: 92,
-    },
-    {
-      date: new Date('2022-01-10'),
-      availability: 86,
+  const priceFormatter = useMemo(
+    () =>
+      new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }),
+    [],
+  );
+
+  const scrubberPriceFormatter = useMemo(
+    () =>
+      new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      }),
+    [],
+  );
+
+  const formatPrice = useCallback(
+    (price: number) => {
+      return priceFormatter.format(price);
     },
-  ];
+    [priceFormatter],
+  );
+
+  const CustomYAxisTickLabel = useCallback(
+    (props) => (
+      <DefaultAxisTickLabel
+        {...props}
+        dx={4}
+        dy={-12}
+        horizontalAlignment="left"
+      />
+    ),
+    [],
+  );
+
+  const formatDate = useCallback((date: Date) => {
+    const dayOfWeek = date.toLocaleDateString('en-US', { weekday: 'short' });
 
-  const accessibilityLabel = useMemo(() => {
-    if (scrubIndex === undefined) return undefined;
-    const event = availabilityEvents[scrubIndex];
-    const formattedDate = event.date.toLocaleDateString('en-US', {
-      weekday: 'short',
+    const monthDay = date.toLocaleDateString('en-US', {
       month: 'short',
       day: 'numeric',
-      year: 'numeric',
     });
-    const status =
-      event.availability >= 90 ? 'Good' : event.availability >= 85 ? 'Warning' : 'Critical';
-    return `${formattedDate}: Availability ${event.availability}% - Status: ${status}`;
-  }, [scrubIndex, availabilityEvents]);
 
-  const ChartDefs = memo(({ yellowThresholdPercentage = 85, greenThresholdPercentage = 90 }) => {
-    const { drawingArea, height, series, getYScale, getYAxis } = useCartesianChartContext();
-    const yScale = getYScale();
-    const yAxis = getYAxis();
+    const time = date.toLocaleTimeString('en-US', {
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+
+    return `${dayOfWeek}, ${monthDay}, ${time}`;
+  }, []);
+
+  const scrubberLabel = useCallback(
+    (index: number) => {
+      const price = scrubberPriceFormatter.format(prices[index].value);
+      const date = formatDate(prices[index].date);
+      return (
+        <>
+          <tspan style={{ fontWeight: 'bold' }}>{price} USD</tspan> {date}
+        </>
+      );
+    },
+    [scrubberPriceFormatter, prices, formatDate],
+  );
 
-    if (!series || !drawingArea || !yScale) return null;
+  const CustomScrubberBeacon = memo(({ dataX, dataY, seriesId, isIdle }: ScrubberBeaconProps) => {
+    const { getSeries, getXScale, getYScale } = useCartesianChartContext();
+    const targetSeries = getSeries(seriesId);
+    const xScale = getXScale();
+    const yScale = getYScale(targetSeries?.yAxisId);
 
-    const rangeBounds = yAxis?.domain;
-    const rangeMin = rangeBounds?.min ?? 0;
-    const rangeMax = rangeBounds?.max ?? 100;
+    const pixelCoordinate = useMemo(() => {
+      if (!xScale || !yScale) return;
+      return projectPoint({ x: dataX, y: dataY, xScale, yScale });
+    }, [dataX, dataY, xScale, yScale]);
 
-    // Calculate the Y positions in the chart coordinate system
-    const yellowThresholdY = yScale(yellowThresholdPercentage) ?? 0;
-    const greenThresholdY = yScale(greenThresholdPercentage) ?? 0;
-    const minY = yScale(rangeMax) ?? 0; // Top of chart (max value)
-    const maxY = yScale(rangeMin) ?? drawingArea.height; // Bottom of chart (min value)
+    if (!pixelCoordinate) return;
 
-    // Calculate percentages based on actual chart positions
-    const yellowThreshold = ((yellowThresholdY - minY) / (maxY - minY)) * 100;
-    const greenThreshold = ((greenThresholdY - minY) / (maxY - minY)) * 100;
+    if (isIdle) {
+      return (
+        <m.circle
+          animate={{ cx: pixelCoordinate.x, cy: pixelCoordinate.y }}
+          cx={pixelCoordinate.x}
+          cy={pixelCoordinate.y}
+          fill="var(--color-bg)"
+          r={5}
+          stroke="var(--color-fg)"
+          strokeWidth={3}
+          transition={defaultTransition}
+        />
+      );
+    }
 
     return (
-      <defs>
-        <linearGradient
-          gradientUnits="userSpaceOnUse"
-          id="availabilityGradient"
-          x1="0%"
-          x2="0%"
-          y1={minY}
-          y2={maxY}
-        >
-          <stop offset="0%" stopColor="var(--color-fgPositive)" />
-          <stop offset={`${greenThreshold}%`} stopColor="var(--color-fgPositive)" />
-          <stop offset={`${greenThreshold}%`} stopColor="var(--color-fgWarning)" />
-          <stop offset={`${yellowThreshold}%`} stopColor="var(--color-fgWarning)" />
-          <stop offset={`${yellowThreshold}%`} stopColor="var(--color-fgNegative)" />
-          <stop offset="100%" stopColor="var(--color-fgNegative)" />
-        </linearGradient>
-      </defs>
+      <circle
+        cx={pixelCoordinate.x}
+        cy={pixelCoordinate.y}
+        fill="var(--color-bg)"
+        r={5}
+        stroke="var(--color-fg)"
+        strokeWidth={3}
+      />
     );
   });
 
   return (
-    <CartesianChart
+    <LineChart
       enableScrubbing
-      onScrubberPositionChange={setScrubIndex}
-      height={{ base: 150, tablet: 200, desktop: 250 }}
+      showYAxis
+      height={{ base: 200, tablet: 250, desktop: 300 }}
+      inset={{ top: 64 }}
       series={[
         {
-          id: 'availability',
-          data: availabilityEvents.map((event) => event.availability),
-          color: 'url(#availabilityGradient)',
+          id: 'btc',
+          data: prices.map((price) => price.value),
+          color: 'var(--color-fg)',
+          gradient: {
+            axis: 'x',
+            stops: ({ min, max }) => [
+              { offset: min, color: 'var(--color-fg)', opacity: 0 },
+              { offset: 32, color: 'var(--color-fg)', opacity: 1 },
+            ],
+          },
         },
       ]}
+      style={{ outlineColor: 'var(--color-fg)' }}
       xAxis={{
-        data: availabilityEvents.map((event) => event.date.getTime()),
+        range: ({ min, max }) => ({ min: 96, max: max }),
       }}
       yAxis={{
-        domain: ({ min, max }) => ({ min: Math.max(min - 2, 0), max: Math.min(max + 2, 100) }),
+        position: 'left',
+        width: 0,
+        showGrid: true,
+        tickLabelFormatter: formatPrice,
+        TickLabelComponent: CustomYAxisTickLabel,
       }}
-      padding={{ left: 2, right: 2 }}
-      accessibilityLabel={accessibilityLabel}
     >
-      <ChartDefs />
-      <XAxis
-        showGrid
-        showLine
-        showTickMarks
-        tickLabelFormatter={(value) => new Date(value).toLocaleDateString()}
-      />
-      <YAxis
-        showGrid
-        showLine
-        showTickMarks
-        position="left"
-        tickLabelFormatter={(value) => `${value}%`}
-      />
-      <Line
-        curve="stepAfter"
-        renderPoints={() => ({
-          fill: 'var(--color-bg)',
-          stroke: 'url(#availabilityGradient)',
-          strokeWidth: 2,
-        })}
-        seriesId="availability"
+      <Scrubber
+        hideOverlay
+        BeaconComponent={CustomScrubberBeacon}
+        LineComponent={SolidLine}
+        label={scrubberLabel}
+        labelElevated
       />
-      <Scrubber hideOverlay />
-    </CartesianChart>
+    </LineChart>
   );
 }
 ```
 
 #### Asset Price Widget
 
-You can coordinate LineChart with custom styles to create a custom card that shows the latest price and percent change.
-
 ```jsx live
-function BitcoinChartWithScrubberBeacon() {
+function AssetPriceWidget() {
   const { isPhone } = useBreakpoints();
   const prices = [...btcCandles].reverse().map((candle) => parseFloat(candle.close));
   const latestPrice = prices[prices.length - 1];
@@ -1149,35 +1636,48 @@ function BitcoinChartWithScrubberBeacon() {
 
   const percentChange = (latestPrice - prices[0]) / prices[0];
 
+  const chartAccessibilityLabel = `Bitcoin price chart. Current price: ${formatPrice(latestPrice)}. Change: ${formatPercentChange(percentChange)}`;
+
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      return `Bitcoin price at position ${index + 1}: ${formatPrice(prices[index])}`;
+    },
+    [prices],
+  );
+
   return (
     <VStack
-      style={{
-        background:
-          'linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%), #ED702F',
-      }}
       borderRadius={300}
       gap={2}
+      overflow="hidden"
       padding={2}
       paddingBottom={0}
-      overflow="hidden"
+      style={{
+        background:
+          'linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.80) 100%), #ED702F',
+      }}
     >
-      <HStack gap={2} alignItems="center">
-        <RemoteImage source={assets.btc.imageUrl} size="xxl" shape="circle" aria-hidden />
+      <HStack alignItems="center" gap={2}>
+        <RemoteImage aria-hidden shape="circle" size="xxl" source={assets.btc.imageUrl} />
         {!isPhone && (
-          <VStack gap={0.25} flexGrow={1}>
-            <Text font="title1" style={{ color: 'white' }} aria-hidden>
+          <VStack flexGrow={1} gap={0.25}>
+            <Text aria-hidden font="title1" style={{ color: 'white' }}>
               BTC
             </Text>
-            <Text font="label1" color="fgMuted">
+            <Text color="fgMuted" font="label1">
               Bitcoin
             </Text>
           </VStack>
         )}
-        <VStack gap={0.25} alignItems="flex-end" flexGrow={isPhone ? 1 : undefined}>
+        <VStack alignItems="flex-end" flexGrow={isPhone ? 1 : undefined} gap={0.25}>
           <Text font="title1" style={{ color: 'white' }}>
             {formatPrice(latestPrice)}
           </Text>
-          <Text font="label1" color="fgPositive" accessibilityLabel={`Up ${formatPercentChange(percentChange)}`}>
+          <Text
+            accessibilityLabel={`Up ${formatPercentChange(percentChange)}`}
+            color="fgPositive"
+            font="label1"
+          >
             +{formatPercentChange(percentChange)}
           </Text>
         </VStack>
@@ -1189,6 +1689,9 @@ function BitcoinChartWithScrubberBeacon() {
         }}
       >
         <LineChart
+          showArea
+          accessibilityLabel={chartAccessibilityLabel}
+          height={92}
           inset={{ left: 0, right: 18, bottom: 0, top: 0 }}
           series={[
             {
@@ -1197,16 +1700,234 @@ function BitcoinChartWithScrubberBeacon() {
               color: assets.btc.color,
             },
           ]}
-          showArea
           width="100%"
-          height={92}
         >
-          <Scrubber idlePulse styles={{ beacon: { stroke: 'white' } }} />
+          <Scrubber
+            idlePulse
+            accessibilityLabel={scrubberAccessibilityLabel}
+            styles={{ beacon: { stroke: 'white' } }}
+          />
         </LineChart>
       </div>
     </VStack>
   );
-};
+}
+```
+
+#### Service Availability
+
+You can have irregular data points by passing in `data` to `xAxis`.
+
+```jsx live
+function ServiceAvailability() {
+  const availabilityEvents = useMemo(
+    () => [
+      { date: new Date('2022-01-01'), availability: 79 },
+      { date: new Date('2022-01-03'), availability: 81 },
+      { date: new Date('2022-01-04'), availability: 82 },
+      { date: new Date('2022-01-06'), availability: 91 },
+      { date: new Date('2022-01-07'), availability: 92 },
+      { date: new Date('2022-01-10'), availability: 86 },
+    ],
+    [],
+  );
+
+  const chartAccessibilityLabel = `Availability chart showing ${availabilityEvents.length} data points over time`;
+
+  const scrubberAccessibilityLabel = useCallback(
+    (index: number) => {
+      const event = availabilityEvents[index];
+      const formattedDate = event.date.toLocaleDateString('en-US', {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      });
+      const status =
+        event.availability >= 90 ? 'Good' : event.availability >= 85 ? 'Warning' : 'Critical';
+      return `${formattedDate}: Availability ${event.availability}% - Status: ${status}`;
+    },
+    [availabilityEvents],
+  );
+
+  return (
+    <CartesianChart
+      enableScrubbing
+      accessibilityLabel={chartAccessibilityLabel}
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      series={[
+        {
+          id: 'availability',
+          data: availabilityEvents.map((event) => event.availability),
+          gradient: {
+            stops: ({ min, max }) => [
+              { offset: min, color: 'var(--color-fgNegative)' },
+              { offset: 85, color: 'var(--color-fgNegative)' },
+              { offset: 85, color: 'var(--color-fgWarning)' },
+              { offset: 90, color: 'var(--color-fgWarning)' },
+              { offset: 90, color: 'var(--color-fgPositive)' },
+              { offset: max, color: 'var(--color-fgPositive)' },
+            ],
+          },
+        },
+      ]}
+      xAxis={{
+        data: availabilityEvents.map((event) => event.date.getTime()),
+      }}
+      yAxis={{
+        domain: ({ min, max }) => ({ min: Math.max(min - 2, 0), max: Math.min(max + 2, 100) }),
+      }}
+    >
+      <XAxis
+        showGrid
+        showLine
+        showTickMarks
+        tickLabelFormatter={(value) => new Date(value).toLocaleDateString()}
+      />
+      <YAxis
+        showGrid
+        showLine
+        showTickMarks
+        position="left"
+        tickLabelFormatter={(value) => `${value}%`}
+      />
+      <Line
+        curve="stepAfter"
+        points={(props) => ({
+          ...props,
+          fill: 'var(--color-bg)',
+          stroke: props.fill,
+        })}
+        seriesId="availability"
+      />
+      <Scrubber hideOverlay accessibilityLabel={scrubberAccessibilityLabel} />
+    </CartesianChart>
+  );
+}
+```
+
+#### Forecast Asset Price
+
+You can combine multiple lines within a series to change styles dynamically.
+
+```jsx live
+function ForecastAssetPrice() {
+  const startYear = 2020;
+  const data = [50, 45, 47, 46, 54, 54, 60, 61, 63, 66, 70];
+  const currentIndex = 6;
+
+  const strokeWidth = 3;
+  // To prevent cutting off the edge of our lines
+  const clipOffset = strokeWidth;
+
+  const axisFormatter = useCallback(
+    (dataIndex: number) => {
+      return startYear + dataIndex;
+    },
+    [startYear],
+  );
+
+  const HistoricalLineComponent = memo((props: SolidLineProps) => {
+    const { drawingArea, getXScale } = useCartesianChartContext();
+    const xScale = getXScale();
+
+    if (!xScale || !drawingArea) return;
+
+    const currentX = xScale(currentIndex);
+
+    if (currentX === undefined) return;
+
+    return (
+      <>
+        <defs>
+          <clipPath id="historical-clip">
+            <rect
+              height={drawingArea.height + clipOffset * 2}
+              width={currentX + clipOffset - drawingArea.x}
+              x={drawingArea.x - clipOffset}
+              y={drawingArea.y - clipOffset}
+            />
+          </clipPath>
+        </defs>
+        <g clipPath="url(#historical-clip)">
+          <SolidLine strokeWidth={strokeWidth} {...props} />
+        </g>
+      </>
+    );
+  });
+
+  // Since the solid and dotted line have different curves,
+  // we need two separate line components. Otherwise we could
+  // have one line component with SolidLine and DottedLine inside
+  // of it and two clipPaths.
+  const ForecastLineComponent = memo((props: DottedLineProps) => {
+    const { drawingArea, getXScale } = useCartesianChartContext();
+    const xScale = getXScale();
+
+    if (!xScale || !drawingArea) return;
+
+    const currentX = xScale(currentIndex);
+
+    if (currentX === undefined) return;
+
+    return (
+      <>
+        <defs>
+          <clipPath id="forecast-clip">
+            <rect
+              height={drawingArea.height + clipOffset * 2}
+              width={drawingArea.x + drawingArea.width - currentX + clipOffset * 2}
+              x={currentX}
+              y={drawingArea.y - clipOffset}
+            />
+          </clipPath>
+        </defs>
+        <g clipPath="url(#forecast-clip)">
+          <DottedLine
+            strokeDasharray={`0 ${strokeWidth * 2}`}
+            strokeWidth={strokeWidth}
+            {...props}
+          />
+        </g>
+      </>
+    );
+  });
+
+  const CustomScrubber = memo(() => {
+    const { scrubberPosition } = useScrubberContext();
+    const isScrubbing = scrubberPosition !== undefined;
+    // We need a fade in animation for the Scrubber
+    return (
+      <m.g
+        animate={{ opacity: 1 }}
+        initial={{ opacity: 0 }}
+        transition={{ duration: 0.15, delay: 0.35 }}
+      >
+        <g style={{ opacity: isScrubbing ? 1 : 0 }}>
+          <Scrubber hideOverlay />
+        </g>
+        <g style={{ opacity: isScrubbing ? 0 : 1 }}>
+          <DefaultScrubberBeacon dataX={currentIndex} dataY={data[currentIndex]} seriesId="price" />
+        </g>
+      </m.g>
+    );
+  });
+
+  return (
+    <CartesianChart
+      enableScrubbing
+      height={{ base: 200, tablet: 225, desktop: 250 }}
+      maxWidth={512}
+      series={[{ id: 'price', data, color: assets.btc.color }]}
+      style={{ margin: '0 auto' }}
+    >
+      <Line LineComponent={HistoricalLineComponent} curve="linear" seriesId="price" />
+      <Line LineComponent={ForecastLineComponent} curve="monotone" seriesId="price" type="dotted" />
+      <XAxis position="bottom" requestedTickCount={3} tickLabelFormatter={axisFormatter} />
+      <CustomScrubber />
+    </CartesianChart>
+  );
+}
 ```
 
 ## Props
@@ -1215,33 +1936,14 @@ function BitcoinChartWithScrubberBeacon() {
 | --- | --- | --- | --- | --- |
 | `AreaComponent` | `AreaComponent` | No | `-` | Custom component to render line area fill. |
 | `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 | `-` | - |
 | `areaType` | `dotted \| solid \| gradient` | No | `'gradient'` | The type of area fill to add to the line. |
-| `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 | `-` | - |
@@ -1261,316 +1963,96 @@ function BitcoinChartWithScrubberBeacon() {
 | `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` | `string \| number` | No | `-` | - |
-| `fillRule` | `inherit \| nonzero \| evenodd` | No | `-` | - |
-| `filter` | `string` | No | `-` | - |
-| `filterRes` | `string \| number` | No | `-` | - |
-| `filterUnits` | `string \| number` | No | `-` | - |
 | `flexBasis` | `ResponsiveProp<FlexBasis<string \| number>>` | No | `-` | - |
 | `flexDirection` | `ResponsiveProp<row \| row-reverse \| column \| column-reverse>` | No | `-` | - |
-| `flexGrow` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
-| `flexShrink` | `-moz-initial \| inherit \| initial \| revert \| revert-layer \| unset` | No | `-` | - |
+| `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 | `-` | - |
-| `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 | `-` | - |
+| `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 | `-` | - |
-| `onPointClick` | `((event: MouseEvent<Element, MouseEvent>, point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when a dot is clicked. Automatically makes dots appear pressable when provided. |
+| `onChange` | `FormEventHandler<HTMLDivElement>` | No | `-` | - |
+| `onPointClick` | `((event: MouseEvent<Element, MouseEvent>, point: { x: number; y: number; dataX: number; dataY: number; }) => void)` | No | `-` | Handler for when a point is clicked. Passed through to Point components rendered via points. |
 | `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` | `number \| ({ base?: Opacity; phone?: Opacity \| undefined; tablet?: Opacity \| undefined; desktop?: Opacity \| undefined; } & number) \| undefined` | No | `1` | Opacity of the lines stroke. Will also be applied to points and area fill. |
+| `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 | `-` | - |
+| `points` | `boolean \| ((defaults: PointBaseProps) => boolean \| Partial<PointProps> \| null) \| undefined` | No | `-` | Controls whether and how to render points at each data point in the series. - true: Show all points with default styling - false or undefined: Hide all points - Function: Called for every entry in the data array to customize individual points |
 | `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 | `-` | - |
-| `renderPoints` | `((params: RenderPointsParams) => boolean \| PointConfig \| null) \| undefined` | No | `-` | Callback function to determine how to render points at each data point in the series. Called for every entry in the data array. |
-| `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` | `LineSeries[]` | No | `-` | Configuration objects that define how to visualize the data. Each series supports Line component props for individual customization. |
-| `shapeRendering` | `string \| number` | No | `-` | - |
-| `showArea` | `boolean` | No | `-` | Show area fill under the line. |
+| `showArea` | `boolean` | No | `-` | Whether to show area fill under the line. |
 | `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 | `-` | - |
-| `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 | `-` | - |
+| `strokeOpacity` | `number` | No | `1` | Opacity of the line |
+| `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 | `-` | - |
-| `type` | `dotted \| solid \| gradient` | No | `'solid'` | The type of line 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 | `-` | - |
+| `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 line animations. |
+| `type` | `dotted \| solid` | No | `'solid'` | The type of line to render. |
+| `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 | `-` | - |