Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/dither-line-chart
Usage
import {
ActiveDot,
Dot,
Grid,
Line,
LineChart,
Tooltip,
XAxis,
YAxis,
} from "@/components/ui/dither-line-chart";
import type { ChartConfig } from "@/components/ui/dither-line-chart";const data = [
{ month: "Jan", latency: 24 },
{ month: "Feb", latency: 31 },
{ month: "Mar", latency: 27 },
];
const config = {
latency: { color: "purple", label: "Latency" },
} satisfies ChartConfig;
<LineChart config={config} data={data} markerIndex={1} width={56}>
<Grid horizontal />
<XAxis dataKey="month" />
<YAxis tickCount={4} />
<Line dataKey="latency" strokeVariant="solid">
<Dot variant="colored-border" />
<ActiveDot variant="filled" />
</Line>
<Tooltip labelKey="month" />
</LineChart>;Examples
Stroke and marker variants
Use strokeVariant for solid or dashed lines. Dot and ActiveDot control regular and inspected markers independently.
Terminal
import { Box } from "ink";
import {
ActiveDot,
Dot,
Line,
LineChart,
} from "@/components/ui/dither-line-chart";
import type { ChartConfig } from "@/components/ui/dither-line-chart";
const data = [
{ value: 14 },
{ value: 26 },
{ value: 21 },
{ value: 38 },
{ value: 33 },
{ value: 45 },
];
const config = {
value: { color: "purple", label: "Latency" },
} satisfies ChartConfig;
export function DitherLineChartVariants() {
return (
<Box gap={2}>
{(["solid", "dashed"] as const).map((strokeVariant) => (
<LineChart
animate={false}
config={config}
data={data}
height={7}
interactive={false}
key={strokeVariant}
markerIndex={3}
title={strokeVariant}
width={29}
>
<Line dataKey="value" strokeVariant={strokeVariant}>
<Dot variant="colored-border" />
<ActiveDot variant="filled" />
</Line>
</LineChart>
))}
</Box>
);
}API Reference
| Prop | Type | Default |
|---|---|---|
data | TData[] | required |
config | ChartConfig | required |
width | number | 56 |
height | number | 12 |
bloom | "off" | "low" | "high" | "aura" | BloomConfig | "off" |
markerIndex | number | null | null |
interactive | boolean | true |
noColor | boolean | false |
screenReaderMode | boolean | false |
Keyboard controls match the area chart: arrows or H/J/K/L navigate, Enter selects a series, Escape clears, and R replays enabled motion.