Terminal
█
dither-area-chart-demo █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█
█Installation
$ pnpm dlx shadcn@latest add @termcn/opentui/dither-area-chart
Usage
import {
Area,
AreaChart,
Grid,
Legend,
Tooltip,
XAxis,
YAxis,
} from "@/components/ui/dither-area-chart";
import type { ChartConfig } from "@/components/ui/dither-area-chart";const data = [
{ month: "Jan", desktop: 38, mobile: 22 },
{ month: "Feb", desktop: 52, mobile: 31 },
{ month: "Mar", desktop: 47, mobile: 35 },
];
const config = {
desktop: { color: "blue", label: "Desktop" },
mobile: { color: "pink", label: "Mobile" },
} satisfies ChartConfig;
<AreaChart config={config} data={data} height={12} width={56}>
<Grid horizontal />
<XAxis dataKey="month" />
<YAxis tickCount={4} />
<Area dataKey="desktop" variant="gradient" />
<Area dataKey="mobile" variant="dotted" />
<Legend align="left" />
<Tooltip labelKey="month" />
</AreaChart>;Examples
Fill variants
Set variant on each Area to choose a gradient, dotted, hatched, or solid fill.
Terminal
█
dither-area-chart-variants █
Loading preview... █
█
█
█
█
█
█
█
█
█
█
█
█
█
█Stacking modes
Use stackType="stacked" for cumulative values or stackType="percent" for normalized proportions.
Terminal
█
dither-area-chart-stacking █
Loading preview... █
█
█
█
█
█
█
█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" |
markerIndex | number | null | null |
interactive | boolean | true |
noColor | boolean | false |
screenReaderMode | boolean | false |
Use left/right to inspect points, up/down to focus a series, Enter to select, Escape to clear, and R to replay animation. H/J/K/L are supported too.