ink-pie-chart

A pie / donut chart component for Ink, the React renderer for CLIs.

Slices are rasterized onto a square pixel grid and rendered two pixels per terminal row using Unicode half-block characters (▀ ▄ █), so the chart reads as an actual circle rather than a bar-chart substitute.

      ▄▄▄▄▄▄
   ▄▄████████▄▄        ■ Chrome    65.0%
  ██████████████       ■ Firefox   20.0%
  ██████████░░██       ■ Safari    10.0%
  ██████████░░░░       ■ Other      5.0%
   ▀▀██████░░▀▀
      ▀▀▀▀▀▀

Install

npm install ink-pie-chart ink react

ink (>=6) and react (>=19) are peer dependencies.

Usage

import React from 'react';
import { render } from 'ink';
import { PieChart } from 'ink-pie-chart';

render(
  <PieChart
    data={[
      { label: 'Chrome', value: 65 },
      { label: 'Firefox', value: 20 },
      { label: 'Safari', value: 10 },
      { label: 'Other', value: 5 },
    ]}
  />
);

Donut chart

<PieChart
  donut
  radius={6}
  data={[
    { label: 'Pass', value: 92, color: 'green' },
    { label: 'Fail', value: 8, color: 'red' },
  ]}
  format={(value, percent) => `${value} (${percent.toFixed(0)}%)`}
/>

Props

| Prop | Type | Default | Description | | ---------------- | -------------------------------------------------- | --------- | ------------------------------------------------------------------------ | | data | { label: string; value: number; color?: string }[] | — | Slices to render. Non-positive values are skipped. | | radius | number | 8 | Chart radius in terminal rows. | | donut | boolean | false | Renders a ring instead of a filled pie. | | innerRadius | number | 0.5 | Donut hole size as a fraction of radius (0-1). Only used when donut. | | startAngle | number | 0 | Degrees clockwise from the top where the first slice begins. | | clockwise | boolean | true | Direction slices are laid out in. | | showLegend | boolean | true | Whether to render the legend. | | legendPosition | 'right' \| 'bottom' | 'right' | Where the legend is placed relative to the chart. | | format | (value: number, percent: number) => string | ${percent.toFixed(1)}% | Formats each legend row's value. | | colors | string[] | built-in palette | Categorical colors used in data order for slices without their own color. |

Each data point may set its own color (hex code or Ink color name), which takes precedence over colors and the built-in palette.

Development

npm install
npm run build     # compile to dist/
npm run demo      # build and run bin/demo.tsx
npm test          # jest unit + component tests
npm run lint

License

MIT