Terminal
█
dither-sparkline-demo █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Installation
$ pnpm dlx shadcn@latest add @termcn/opentui/dither-sparkline
Usage
import { Sparkline } from "@/components/ui/dither-sparkline";<Sparkline
color="blue"
data={[18, 26, 23, 41, 37, 52, 49, 63]}
height={4}
markerIndex={5}
title="Requests"
variant="gradient"
width={28}
/>Examples
Fill and marker variants
Sparklines support every dither fill. Add markerIndex to highlight a specific sample without enabling interaction.
Terminal
█
dither-sparkline-variants █
Loading preview... █
█
█
█
█
█
█
█
█
█
█import { Sparkline } from "@/components/ui/dither-sparkline";
const data = [18, 26, 23, 41, 37, 52, 49, 63];
const variants = ["gradient", "dotted", "hatched", "solid"] as const;
export function DitherSparklineVariants() {
return (
<box flexDirection="column" gap={1}>
{[variants.slice(0, 2), variants.slice(2)].map((row, rowIndex) => (
<box gap={2} key={rowIndex}>
{row.map((variant, index) => (
<box key={variant}>
<Sparkline
color={rowIndex === 0 ? "blue" : "green"}
data={data}
height={4}
markerIndex={(rowIndex + index) % 2 === 0 ? 5 : null}
title={variant}
variant={variant}
width={27}
/>
</box>
))}
</box>
))}
</box>
);
}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 |