Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/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
import { Box } from "ink";
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) => (
<Sparkline
color={rowIndex === 0 ? "blue" : "green"}
data={data}
height={4}
key={variant}
markerIndex={(rowIndex + index) % 2 === 0 ? 5 : null}
title={variant}
variant={variant}
width={27}
/>
))}
</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 |