Text pie charts and donut charts with arc marks

glyphChartArc(data, channels?, options?) uses y as the slice magnitude and label as its name. Numeric arrays also work. The example shows an illustrative allocation of engineering hours.

Pie with callouts

             Design · 10%─────══════██████                              
                           ▌════════█████████                           
          Docs · 10%─────▌▌▌▌═══════███████████─────API · 30%           
                       ▌▌▌▌▌▌▌▌═════█████████████                       
                      ▌▌▌▌▌▌▌▌▌▌════██████████████                      
                      ╱╱╱╱╱▌▌▌▌▌▌▌══██████████████                      
                      ╱╱╱╱╱╱╱╱╱╱╱▌▌═██████████████                      
        Ops · 12%─────╱╱╱╱╱╱╱╱╱╱╱╱▚▚░░░███████████                      
                      ╱╱╱╱╱╱╱╱▚▚▚▚▚▚░░░░░░░░░█████                      
                      ╱╱╱▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░░░░                      
                       ▚▚▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░░░                       
                         ▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░                         
           Tests · 16%─────▚▚▚▚▚▚▚▚░░░░░░░░░░                           
                              ▚▚▚▚░░░░░░░░─────Web · 22%                

Code

import { renderGlyphChart } from "@glyphcss/charts";

const { text } = renderGlyphChart({
  type: "arc",
  data: [
    {
      part: "API",
      hours: 30
    },
    {
      part: "Web",
      hours: 22
    },
    {
      part: "Tests",
      hours: 16
    },
    {
      part: "Ops",
      hours: 12
    },
    {
      part: "Docs",
      hours: 10
    },
    {
      part: "Design",
      hours: 10
    }
  ],
  channels: {
    y: "hours",
    label: "part"
  }
}, {
  target: "chat",
  width: 72,
  height: 18,
  legend: false
});
console.log(text);

Donut with a hole

             Design · 10%─────══════██████                              
                           ▌════════█████████                           
          Docs · 10%─────▌▌▌▌═══════███████████─────API · 30%           
                       ▌▌▌▌▌▌▌▌═══    ███████████                       
                      ▌▌▌▌▌▌▌▌▌          █████████                      
                      ╱╱╱╱╱▌▌              ███████                      
                      ╱╱╱╱╱╱╱              ███████                      
        Ops · 12%─────╱╱╱╱╱╱╱              ███████                      
                      ╱╱╱╱╱╱╱              ░░█████                      
                      ╱╱╱▚▚▚▚▚▚          ░░░░░░░░░                      
                       ▚▚▚▚▚▚▚▚▚▚▚    ░░░░░░░░░░░                       
                         ▚▚▚▚▚▚▚▚▚▚░░░░░░░░░░░░                         
           Tests · 16%─────▚▚▚▚▚▚▚▚░░░░░░░░░░                           
                              ▚▚▚▚░░░░░░░░─────Web · 22%                

Code

import { renderGlyphChart } from "@glyphcss/charts";

const { text } = renderGlyphChart({
  type: "arc",
  data: [
    {
      part: "API",
      hours: 30
    },
    {
      part: "Web",
      hours: 22
    },
    {
      part: "Tests",
      hours: 16
    },
    {
      part: "Ops",
      hours: 12
    },
    {
      part: "Docs",
      hours: 10
    },
    {
      part: "Design",
      hours: 10
    }
  ],
  channels: {
    y: "hours",
    label: "part"
  },
  options: {
    innerRadius: 0.5
  }
}, {
  target: "chat",
  width: 72,
  height: 18,
  legend: false
});
console.log(text);

import { glyphChartArc, renderGlyphChart } from "@glyphcss/charts";
const result = renderGlyphChart(
  glyphChartArc(
    [
      { part: "API", hours: 30 },
      { part: "Web", hours: 22 },
      { part: "Tests", hours: 16 },
      { part: "Ops", hours: 12 },
      { part: "Docs", hours: 10 },
      { part: "Design", hours: 10 },
    ],
    { y: "hours", label: "part" },
    { innerRadius: 0.5 },
  ),
  {
    target: "chat",
    width: 72,
    height: 20,
  },
);

• innerRadius is a fraction in [0, 1), not a pixel radius.
• labels: "callout" is the default; "legend-only" suppresses the leader labels. Callouts already name every slice, so these examples render with legend: false.
• Negative values do not contribute and report slice-dropped; all-zero input reports empty-total.
• cellAspect adjusts the width/height ratio used to shape the disc. Measure your display font when a circle appears stretched.
• Narrow layouts may omit or abbreviate labels; inspect the report and increase width.

For source-text input, see Mermaid pie charts.