Terminal
Installation
$ pnpm dlx shadcn@latest add @termcn/ink/dither-bar-chart
Usage
import {
Bar,
BarChart,
Grid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "@/components/ui/dither-bar-chart";
import type { ChartConfig } from "@/components/ui/dither-bar-chart";const data = [
{ month: "Jan", direct: 34, search: 18 },
{ month: "Feb", direct: 47, search: 24 },
{ month: "Mar", direct: 42, search: 29 },
];
const config = {
direct: { color: "green", label: "Direct" },
search: { color: "purple", label: "Search" },
} satisfies ChartConfig;
<BarChart config={config} data={data} stackType="stacked" width={56}>
<Grid horizontal />
<XAxis dataKey="month" />
<YAxis tickCount={4} />
<Bar dataKey="direct" variant="gradient" />
<Bar dataKey="search" variant="hatched" />
<Legend align="left" />
<Tooltip labelKey="month" />
</BarChart>;Examples
Bar textures
Set variant on a Bar to render gradient, dotted, hatched, or solid cells.
Terminal
import { Box } from "ink";
import { Bar, BarChart } from "@/components/ui/dither-bar-chart";
import type { ChartConfig } from "@/components/ui/dither-bar-chart";
const data = [{ value: 18 }, { value: 32 }, { value: 26 }, { value: 43 }];
const config = {
value: { color: "orange", label: "Deploys" },
} satisfies ChartConfig;
const variants = ["gradient", "dotted", "hatched", "solid"] as const;
export function DitherBarChartVariants() {
return (
<Box flexDirection="column" gap={1}>
{[variants.slice(0, 2), variants.slice(2)].map((row, rowIndex) => (
<Box gap={2} key={rowIndex}>
{row.map((variant) => (
<BarChart
animate={false}
config={config}
data={data}
height={6}
interactive={false}
key={variant}
title={variant}
width={27}
>
<Bar dataKey="value" variant={variant} />
</BarChart>
))}
</Box>
))}
</Box>
);
}Stacking modes
Switch between cumulative stacks and normalized percent stacks with stackType.
Terminal
import { Box } from "ink";
import { Bar, BarChart } from "@/components/ui/dither-bar-chart";
import type { ChartConfig } from "@/components/ui/dither-bar-chart";
const data = [
{ direct: 24, search: 18 },
{ direct: 35, search: 22 },
{ direct: 31, search: 28 },
{ direct: 46, search: 25 },
];
const config = {
direct: { color: "green", label: "Direct" },
search: { color: "purple", label: "Search" },
} satisfies ChartConfig;
export function DitherBarChartStacking() {
return (
<Box gap={2}>
{(["stacked", "percent"] as const).map((stackType) => (
<BarChart
animate={false}
config={config}
data={data}
height={7}
interactive={false}
key={stackType}
stackType={stackType}
title={stackType}
width={29}
>
<Bar dataKey="direct" variant="gradient" />
<Bar dataKey="search" variant="hatched" />
</BarChart>
))}
</Box>
);
}API Reference
| Prop | Type | Default |
|---|---|---|
data | TData[] | required |
config | ChartConfig | required |
width | number | 56 |
height | number | 12 |
stackType | "default" | "stacked" | "percent" | "default" |
bloom | "off" | "low" | "high" | "aura" | BloomConfig | "off" |
interactive | boolean | true |
noColor | boolean | false |
screenReaderMode | boolean | false |
Arrow keys or H/J/K/L navigate chart state; Enter selects clickable series and Escape clears the active point.