Pie Chart

Proportions of a whole, as a pie, donut (set innerRadius) or rose. Useful for a handful of categories that genuinely sum to something meaningful.

Reach for it when you need:

• Downtime split by category
• Scrap reasons as a share of total

Component name: PieChart · Category: Chart

In the palette: Pie — set innerRadius for a donut, or the rose toggle. Bind data to a named query; click a slice to expose {{point.value}} and {{point.percent}}.

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
data	array	[{"name":"Running","value":62},{"name":"Idle","value":20},{"… (truncated)	Array of row objects. Bind to a named query ({{query.MyQuery}}), a tag, or edit inline. Rows map to series via categoryField + seriesFields (auto-derived when empty).
categoryField	string	""	Row key for the category/name axis. Empty ⇒ first non-numeric column.
seriesFields	array	[]	Which columns become series (+ per-series color, and stack/area/renderAs where they apply). Empty ⇒ all numeric columns.
animation	boolean	true	Enable enter/update animation.
animationDuration	number	600	ms.
animationEasing	enum	cubicOut	Options: linear · cubicIn · cubicOut · cubicInOut · quadraticOut · elasticOut · bounceOut.
animationDelay	number	0	Per-datum stagger (ms).
title	object	{"show":true,"text":"","subtext":"","left":"left"}	—
legend	object	{"show":true,"type":"plain","orient":"horizontal","left":"ce… (truncated)	—
tooltip	object	{"show":true,"trigger":"axis","axisPointerType":"line"}	—
colorPalette	string	""	Comma-separated series colors (e.g. #2563eb, #16a34a). Empty ⇒ theme palette.
backgroundColor	color	""	Empty ⇒ transparent/theme.
innerRadius	number	0	Donut hole as % of radius: 0 = full pie, > 0 = donut (e.g. 45).
outerRadius	number	70	Outer radius as % of the available space.
rose	boolean	false	Nightingale/rose chart — slice radius encodes the value.
borderRadius	number	0	—
dataLabel	object	{"show":false,"position":"top"}	—
enableClick	boolean	true	Fire the Data click event + expose lastClicked.
lastClicked	object	{}	Output (bind from this): the last-clicked datum — {{ ThisChart.lastClicked.value }}.
optionOverride	string	""	Power user: paste a raw JSON object of chart options to deep-merge over the built chart, e.g. {"series":[{"itemStyle":{"color":"#e11"}}]}. Empty = none.
emptyMessage	string	No data	—
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.
dataClick	Data click	Chart	The clicked datum, under point.
dataDblClick	Data double click	Chart	The clicked datum, under point.
legendSelect	Legend toggle	Chart	The toggled series.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Pies are hard to read beyond about five slices, and hopeless for comparing similar values. If the reader has to compare slice sizes, use Bar Chart instead.