UI Toolbox logoUI Toolbox

PieChart

PieChart in UIToolbox draws a pie or a donut of its PieSlice children. Each slice is also its legend row.

Video tutorial: Pie chart. All videos: Video tutorials.

<tb:PieChart name="budget" inner-radius="0.55" center-label="2400" start-angle="0" value-format="0" style="height: 240px;">
    <tb:PieSlice label="Rent" value="1200" />
    <tb:PieSlice label="Food" value="450" color="#F28C33" />
    <tb:PieSlice label="Fun" value="150" offset="6" />
</tb:PieChart>

var pie = root.Q<PieChart>("budget");
pie.SliceSelected += slice => Debug.Log(slice == null ? "none" : $"{slice.Label} {slice.Percentage:0.#}%");
pie.AddSlice("Savings", 400);
pie.GetSlice("Rent").Value = 1300;   // the chart updates and eases to the new shares
pie.SetData(expenses, e => e.Name, e => e.Amount);
Member Description
PieSlice.Label (label), Value (value), Color (color), Offset (offset) The name, the size (negative counts as 0), the fill (clear takes the palette color by position), and a fixed pull-out in pixels. A change updates the chart.
PieSlice.Percentage, DisplayColor, Chart The share of the total (0 to 100), the drawn color, and the chart.
PieSlice.GradientColor (gradient-color) The middle color of the slice with Gradient on. Clear takes the slice color made lighter.
Slices, Total, AddSlice, GetSlice, RemoveSlice, ClearSlices, SetData The slices and their sum, and the ways to change them. Call Refresh() after you add or remove slices with Add or Remove. SetData keeps each slice whose label matches the item at its place, with its selection and animation. It makes new slices from the first other label on.
SelectedSlice, SliceSelected The selected slice moves out by ExplodeOffset (explode-offset, 10 px). A click on the selected slice clears the selection.
SliceClicked Sent after a click on a slice or its legend row, and when Enter or the gamepad submit button is pressed with a slice selected. See Drill down.
HoveredSlice, SliceHovered, SliceAt(worldPosition) The slice under the pointer, and a hit test. The hovered slice is drawn lighter, and the plot tooltip shows "Label: value (share%)".
ShowLabels (show-labels), ShowPercentages (show-percentages), ShowLegend (show-legend) The labels on the slices, the shares in the labels and the legend, and the legend. On by default. Slices under 12 degrees get no label.
InnerRadius (inner-radius), CenterLabel (center-label) The hole as a share of the radius (0 to 0.9), and the text in the middle.
StartAngle (start-angle), ValueFormat (value-format) Where the first slice starts, in degrees clockwise from the top, and the number format of the values ("0.##").
Interactive, Animate Pointer and key selection, and the easing of new values. On by default.
Gradient (gradient) Fills each slice with a radial gradient: the middle color at the center, the slice color at the edge. In a donut the hole hides the lightest part. Off by default.
PieChart.Palette The 8 default colors.

Drill down

A click on a slice can show the parts of that slice as the pie. Put a Breadcrumb above the chart for the way back up.

<tb:Breadcrumb name="path" items="Budget" />
<tb:PieChart name="budget" style="height: 240px;" />

// Category has Name, Amount and Parts (null when it has none)
var levels = new List<Category> { budget };
void showLevel() => pie.SetData(levels[^1].Parts, c => c.Name, c => c.Amount);

pie.SliceClicked += slice =>
{
    var part = Array.Find(levels[^1].Parts, c => c.Name == slice.Label);
    if (part?.Parts == null) return;   // no parts: the click only selects the slice
    levels.Add(part);
    path.Push(part.Name);
    showLevel();
};
path.Navigated += index =>
{
    levels.RemoveRange(index + 1, levels.Count - index - 1);
    showLevel();
};
showLevel();

Styling

Class Element
tb-pie-chart The chart (flex row, grows). --tb-pie-stroke sets the line between slices. tb-pie-chart--empty is added when the total is 0.
tb-pie-chart__plot The drawing area (accent border when the chart has focus).
tb-pie-chart__label A label on a slice (small bold white text with a shadow, centered on the slice).
tb-pie-chart__center-label The text in the middle of a donut (large bold text).
tb-pie-chart__legend The column of legend rows.
tb-pie-chart__slice, --highlighted, --selected A slice and its legend row; the hovered row (surface-hover background), and the selected row (accent left bar, bold label).
tb-pie-chart__slice-swatch, -label, -value The color square, the name, and the value and share (muted) of a row.

Hide the focus border

The accent border around the drawing area shows that the chart has focus and that the keys move the selection. To hide the border and keep the keys, add this rule to your style sheet:

.tb-pie-chart:focus .tb-pie-chart__plot {
    border-width: 0;
}

To stop the focus, set focusable="false" on the chart. Then the keys and the gamepad do not move the selection; the pointer continues to select a slice.

<tb:PieChart focusable="false" />