Luna UI Documentation

PieChart is a VisualElement that renders a multi-segment circular chart from parallel Values and Colors lists. Values are normalized to total 100% — pass raw counts, not percentages. Each segment exposes a center point you can use for label placement.

Pie Chart

Setup

UXML:

html

<luna:PieChart background-color="#222222" outline-color="#FFFFFF" outline-width="4" gap-width="2" />

Populate from C# (Values and Colors are List<float> / List<Color>):

csharp

var pie = root.Q<PieChart>();
pie.Values = new List<float> { 35f, 25f, 40f };
pie.Colors = new List<Color> { Color.red, Color.green, Color.blue };

Inspector (UxmlAttributes)

Attribute	Type	Description
`Values`	List<float>	Raw segment sizes. Auto-normalized; mismatched lengths just paint missing segments black.
`Colors`	List<Color>	Per-segment fill colors.
`BackgroundColor`	Color	Disc background, drawn beneath segments (default white). The separators between segments use it too.
`OutlineColor`	Color	Outer-ring stroke color (default white).
`OutlineWidth`	float	Outer-ring stroke width in pixels (default `10`).
`GapWidth`	float	Width of the radial separator drawn between segments (default `0.1`). Set to `0` to disable.

In UXML the attributes are written in kebab case: background-color, outline-color, outline-width, gap-width.

Theming (USS)

Each look attribute has a USS custom property. A sheet that sets one wins over the attribute; where no sheet sets it, the attribute (or its default) draws, so a chart nobody themes looks as before. Widths are plain numbers in pixels: write 4, not 4px (Unity warns about a value with a unit and the attribute draws instead).

Custom property	Overrides
`--pie-chart-background-color`	`BackgroundColor`
`--pie-chart-outline-color`	`OutlineColor`
`--pie-chart-outline-width`	`OutlineWidth`
`--pie-chart-gap-width`	`GapWidth`

The chart carries the pie-chart class. Set the properties in a rule that matches the chart itself. UI Toolkit reads a component's custom properties only from the rules that match that element, so a value set on a parent does not reach the chart; scope with a descendant selector instead (.my-screen .pie-chart):

css

.pie-chart {
    --pie-chart-background-color: #E2DCF6;
    --pie-chart-outline-color: #7B5FD6;
    --pie-chart-outline-width: 4;
    --pie-chart-gap-width: 2;
}

The segment colors stay in Colors: they are data, not theme.

API

Properties

Property	Type	Description
`SegmentCenters`	`List<Vector2>`	Read-only element-space (local) centers of each rendered segment (positioned at 2/3 of the radius along the segment's mid-angle).
`ResolvedBackgroundColor` / `ResolvedOutlineColor`	`Color`	What the chart draws with: the sheet's value when one is set, else the attribute.
`ResolvedOutlineWidth` / `ResolvedGapWidth`	`float`	Same, for the widths.

Events

Event	Description
`OnSegmentCentersChanged`	Fires after each repaint. Subscribe to update overlay labels positioned at `SegmentCenters[i]`.