# Dither Sparkline

Compact dithered sparklines for terminal dashboards, summaries, and inline metrics



<ComponentPreview base="opentui" name="dither-sparkline-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dither-sparkline
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/lib/dither-sparkline-utils.ts" title="lib/dither-sparkline-utils.ts" />

      <ComponentSource src="registry/bases/opentui/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource base="opentui" name="dither-sparkline" title="components/ui/dither-sparkline.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Sparkline } from "@/components/ui/dither-sparkline";
```

```tsx
<Sparkline
  color="blue"
  data={[18, 26, 23, 41, 37, 52, 49, 63]}
  height={4}
  markerIndex={5}
  title="Requests"
  variant="gradient"
  width={28}
/>
```

Examples [#examples]

Fill and marker variants [#fill-and-marker-variants]

Sparklines support every dither fill. Add `markerIndex` to highlight a specific sample without enabling interaction.

<ComponentPreview base="opentui" name="dither-sparkline-variants" rows="13" />

API Reference [#api-reference]

| Prop               | Type                                                | Default      |
| ------------------ | --------------------------------------------------- | ------------ |
| `data`             | `number[]`                                          | required     |
| `color`            | `string`                                            | required     |
| `width`            | `number`                                            | `24`         |
| `height`           | `number`                                            | `4`          |
| `variant`          | `"gradient" \| "dotted" \| "hatched" \| "solid"`    | `"gradient"` |
| `markerIndex`      | `number \| null`                                    | `null`       |
| `animate`          | `boolean`                                           | `false`      |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`      |
| `noColor`          | `boolean`                                           | `false`      |
| `screenReaderMode` | `boolean`                                           | `false`      |