# Sparkline

A small line chart component for displaying data trends.

## Import

```tsx
import { Sparkline } from '@coinbase/cds-web-visualization'
```

## Examples

### Basic Example

The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.

```jsx live
function Example() {
  const dimensions = { width: 64, height: 20 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  return (
    <ListCell
      media={<CellMedia type="image" source={assets.btc.imageUrl} title="BTC" />}
      intermediary={<Sparkline {...dimensions} path={path} color={assets.btc.color} />}
      title={assets.btc.name}
      description={assets.btc.symbol}
      detail={prices[0]}
      subdetail="+4.55%"
      variant="positive"
      onClick={() => console.log('clicked')}
    />
  );
}
```

### Dynamic path colors

```jsx live
function Example() {
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  return (
    <VStack gap={2}>
      {assetColors.map((color) => (
        <Sparkline key={color} {...dimensions} path={path} color={color} />
      ))}
    </VStack>
  );
}
```

### Dynamic background colors

```jsx live
function Example() {
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  return (
    <VStack gap={2}>
      {assetColors.map((background) => (
        <VStack key={background} dangerouslySetBackground={background}>
          <Sparkline {...dimensions} path={path} background={background} color="auto" />
        </VStack>
      ))}
    </VStack>
  );
}
```

### y axis scaling

```jsx live
function Example() {
  const yAxisScalingFactor = 0.2;
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
  return (
    <VStack gap={2}>
      <TextLabel1 as="p">Scale {yAxisScalingFactor}</TextLabel1>
      <Sparkline {...dimensions} path={path} color="auto" yAxisScalingFactor={yAxisScalingFactor} />
    </VStack>
  );
}
```

### Sparkline fill

```jsx live
function Example() {
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  const area = useSparklineArea({ ...dimensions, data: prices });
  return (
    <VStack gap={2}>
      {assetColors.map((color) => (
        <Sparkline key={color} {...dimensions} path={path} color={color}>
          <SparklineArea area={area} />
        </Sparkline>
      ))}
    </VStack>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `color` | `string` | Yes | `-` | The color of the Sparkline graphs line. Accepts any raw color value (hex, rgba, hsl, etc) or auto. Using auto dynamically selects black or white for optimal accessibility. Does not work with CDS theme color names like fgPrimary or CSS variables. |
| `height` | `number` | Yes | `-` | Height of the Sparkline |
| `width` | `number` | Yes | `-` | Width of the Sparkline |
| `background` | `string` | No | `-` | - |
| `children` | `null \| false \| ReactElement<SparklineAreaBaseProps, string \| JSXElementConstructor<any>> \| OptionalElement<SparklineAreaBaseProps>[]` | No | `-` | an optional SparklineArea that can be used to fill in the Sparkline |
| `fillType` | `dotted \| gradient \| gradientDotted` | No | `'dotted'` | Type of fill to use for the area |
| `key` | `Key \| null` | No | `-` | - |
| `path` | `string` | No | `-` | Svg path as string. CDS offers a useSparklinePath which is useful to generate this string. This is accessible via import { useSparklinePath } from @coinbase/cds-common/visualizations/useSparklinePath;. Alternatively, you can use product tailored tooling to generate the SVG path. This component only requires a valid path string is provided. |
| `ref` | `((instance: SparklinePathRef) => void) \| RefObject<SparklinePathRef> \| null` | No | `-` | - |
| `strokeType` | `solid \| gradient` | No | `'solid'` | Type of stroke to use for the line |
| `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 |
| `yAxisScalingFactor` | `number` | No | `-` | Scales the sparkline to show more or less variance. Use a number less than 1 for less variance and a number greater than 1 for more variance. If you use a number greater than 1 it may clip the boundaries of the sparkline. |