~/docs/custom/pie-chart

▚PieChartcustom

Solid disc colored by share with legend

~/custom/pie-chart

live

$ termino pie-chart — solid disc

■ web 46%

■ api 32%

■ batch 14%

■ idle 8%

slices jitter live — share of total

##API

Every cell inside the disc gets the color of the slice covering its angle (12 o'clock start, clockwise). Rim cells lerp toward white for a subtle edge. Legend renders `■ label %` rows below the disc.

properties

prop	type	default	description
data	{ label, value, color }[]	-	Slices; share of total drives the angle
width / height	number	21 / 11	Disc size in characters
legend	boolean	true	Render the label/percent legend

##Keymap

~/keymap

—Display only

##Notes

▸Feeds straight into RingChart — same renderer, different inner radius.
▸Pair with a muted fill background so slices pop.

##Source

Real implementation — this is the code that runs in your terminal.

tsxpie-chart.tsx

1import { createElement as h, useMemo } from "react";
2import { Canvas } from "./canvas";
3import { renderDonut, type Slice } from "./chart";
4
5export interface PieChartProps {
6  data: Slice[];
7  width?: number;
8  height?: number;
9  legend?: boolean;
10}
11
12export function PieChart({ data, width = 21, height = 11, legend = true }: Readonly<PieChartProps>) {
13  const rows = useMemo(
14    () => renderDonut(data, width, height, { innerRatio: 0, legend }),
15    [data, width, height, legend],
16  );
17  return h("box", { flexDirection: "column", gap: 0, width: width + 14 }, h(Canvas, { rows, width: width + 14 }));
18}
19

← BarChart

Vertical bars with gridlines, value and category labels

RingChart →

Donut with a centered total and legend