/
1.1k
Sponsor

Dither Bar Chart

PreviousNext

Dithered grouped, stacked, and percent bar charts with terminal-native textures and interaction

InkOpenTUI
Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/opentui/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

Stacking modes

Switch between cumulative stacks and normalized percent stacks with stackType.

Terminal

API Reference

PropTypeDefault
dataTData[]required
configChartConfigrequired
widthnumber56
heightnumber12
stackType"default" | "stacked" | "percent""default"
bloom"off" | "low" | "high" | "aura" | BloomConfig"off"
interactivebooleantrue
noColorbooleanfalse
screenReaderModebooleanfalse

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