# 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



```ts
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);
```

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



## Donut with a hole



```ts
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);
```

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



```ts
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](/charts/mermaid/#pie).