Skip to content

Pie Chart

The Pie Chart element displays proportional data as slices of a circle. Optionally renders as a donut chart.


Features

  • Pie or donut mode
  • Percentage labels on each slice
  • Color legend below the chart
  • Custom colors per slice
  • Pure SVG rendering — no external dependencies

Settings

SettingDescriptionDefault
TitleChart title"Pie Chart"
DonutRender as a donut (hollow center)false
Show LabelsDisplay percentage on each slicetrue
Show LegendDisplay color legend below charttrue

Slices

Each slice has:

  • Label — segment name (e.g., "Marketing", "Sales")
  • Value — numeric value (percentages are calculated automatically)
  • Color — slice color

Click + Add to add slices. Click x to remove.


Use Cases

  • Budget breakdown
  • Market share distribution
  • Survey response proportions
  • Resource allocation

Styling

Supports the standard Container color and dimension settings.

No-Code App Builder