Pie / Donut Chart — Chart Controls

Minimal Example

{
  "id": "status-breakdown",
  "type": "chart-pie",
  "label": "Cases by Status",
  "width": "half",
  "settings": {
    "height": "300px",
    "binding": {
      "source": "$context",
      "path": "report.statusCounts"
    }
  }
}

// Data shape:
// [
//   { "label": "Open",     "value": 42 },
//   { "label": "In Progress", "value": 18 },
//   { "label": "Closed",   "value": 93 }
// ]

Settings Reference

Setting	Type	Default	Description
`donut`	boolean	false	Render as a donut (ring) chart instead of a solid pie
`innerRadius`	string (CSS %)	`"55%"`	Inner hole radius when `donut: true`
`outerRadius`	string (CSS %)	`"80%"`	Outer ring radius
`centerText`	string	—	Text rendered in the donut center (supports template expressions)
`centerSubtext`	string	—	Smaller secondary text below centerText
`showLabels`	boolean	true	Show slice labels outside the ring
`labelType`	`value` \| `percent` \| `name` \| `name+percent`	`percent`	What to show in slice labels
`minAngle`	number	5	Minimum slice angle in degrees — prevents tiny invisible slices
`roseMode`	boolean	false	Nightingale rose mode — slices have unequal radii proportional to value

Donut Chart with Center Text

The donut variant is common for KPI dashboards where a summary metric is shown in the center hole:

{
  "id": "budget-allocation",
  "type": "chart-pie",
  "settings": {
    "height": "320px",
    "title": "Budget Allocation",
    "donut": true,
    "innerRadius": "60%",
    "outerRadius": "80%",
    "centerText": "{{context.budget.total | currency}}",
    "centerSubtext": "Total Budget",
    "showLabels": true,
    "labelType": "name+percent",
    "colors": ["#6c8cff", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6"],
    "binding": { "source": "$context", "path": "budget.categories" }
  }
}

// Data shape:
// [
//   { "label": "Engineering", "value": 320000 },
//   { "label": "Marketing",   "value": 180000 },
//   { "label": "Operations",  "value": 95000  },
//   { "label": "R&D",         "value": 240000 },
//   { "label": "Other",       "value": 65000  }
// ]

Label Positioning Options

labelType	Output	Best For
`percent`	42%	Proportional comparison (default)
`value`	42,000	Absolute counts or monetary values
`name`	Engineering	When legend is hidden; small slices
`name+percent`	Engineering 42%	Standalone charts without legend

Nightingale Rose Chart

Enable roseMode: true for a Nightingale rose variant where slice angles are equal but radii vary by value. Useful when many slices have similar proportions but different absolute magnitudes:

{
  "id": "regional-distribution",
  "type": "chart-pie",
  "settings": {
    "height": "350px",
    "title": "Revenue by Region",
    "roseMode": true,
    "donut": false,
    "showLabels": true,
    "labelType": "name+percent",
    "binding": { "source": "$context", "path": "sales.byRegion" }
  }
}

Compact Pie for Dashboards

Place two half-width pie charts side by side for a compact dashboard layout. Hide the legend and use labels directly:

// Two pies side by side at "half" width
{
  "id": "open-vs-closed",
  "type": "chart-pie",
  "width": "half",
  "settings": {
    "height": "220px",
    "title": "Open vs Closed Cases",
    "donut": true,
    "innerRadius": "65%",
    "centerText": "{{context.cases.openCount}}",
    "centerSubtext": "Open",
    "showLegend": false,
    "showLabels": true,
    "labelType": "name",
    "colors": ["#ef4444", "#22c55e"],
    "binding": { "source": "$context", "path": "cases.summary" }
  }
},
{
  "id": "priority-breakdown",
  "type": "chart-pie",
  "width": "half",
  "settings": {
    "height": "220px",
    "title": "By Priority",
    "donut": true,
    "innerRadius": "65%",
    "colors": ["#ef4444", "#f59e0b", "#6c8cff"],
    "binding": { "source": "$context", "path": "cases.byPriority" }
  }
}

Too Many Slices Pie charts become unreadable with more than 7 slices. If your data regularly has 8+ categories, use a bar chart instead. Alternatively, group the smallest slices into an "Other" category on the server before binding.

← Area Chart Next: Scatter Plot →