Dither Bar Chart

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/dither-bar-chart
Copy

Usage

Copyimport {
  Bar,
  BarChart,
  Grid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "@/components/ui/dither-bar-chart";
import type { ChartConfig } from "@/components/ui/dither-bar-chart";

Copyconst 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.

Stacking modes

Switch between cumulative stacks and normalized percent stacks with stackType.

API Reference

width is the preferred maximum. The chart clamps itself to the current Ink stdout width when the terminal is narrower.

Arrow keys or H/J/K/L navigate chart state; Enter selects clickable series and Escape clears the active point.

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

• Keyboard: Arrow keys or h / j / k / l move through the chart; Enter / Space select a point; Escape clears the active point; r restarts enabled animation.
• Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
• Screen reader: Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.