Interactive pie

Compact part-to-whole views for a few named categories and their shares of one total.

Purpose: Summarize a small named distribution as parts of a total.
Use when: Few categories and approximate share comparison are the goal.
Avoid when: There are many slices or close values; use bars for reliable comparison.
Equivalent data: Pair the chart with exact values and shares in text or a table.

Four seasonal values shown as shares of one total.

Exact pie values

Series	Sector	Value	Share
Seasons	Spring	81	29.6%
Seasons	Summer	87	31.8%
Seasons	Autumn	47	17.2%
Seasons	Winter	59	21.5%

Each sector names its season and exact value; the adjacent table also gives shares.

Exact pie values

Series	Sector	Value	Share
Seasons	Spring	81	49.4%
Seasons	Summer	18	11.0%
Seasons	Autumn	25	15.2%
Seasons	Winter	40	24.4%

A 40% inner radius opens the center while preserving proportional sector angles.

Exact pie values

Series	Sector	Value	Share
Seasons	Spring	56	34.8%
Seasons	Summer	0	0.0%
Seasons	Autumn	94	58.4%
Seasons	Winter	11	6.8%

Five-degree sector gaps, an offset center, and a right-side legend preserve the upstream composition.

Exact pie values

Series	Sector	Value	Share
Seasons	Spring	62	24.5%
Seasons	Summer	89	35.2%
Seasons	Autumn	28	11.1%
Seasons	Winter	74	29.2%

Equal angles map seasonal values to sector area.

Exact pie values

Series	Sector	Value	Share
Area	Spring	11	11.1%
Area	Summer	45	45.5%
Area	Autumn	37	37.4%
Area	Winter	6	6.1%

Proportional angles remain while seasonal values also change radius.

Exact pie values

Series	Sector	Value	Share
Radius	Spring	95	38.5%
Radius	Summer	66	26.7%
Radius	Autumn	28	11.3%
Radius	Winter	58	23.5%

Two centers compare equal-angle area encoding with proportional-angle radius encoding.

Exact pie values

Series	Sector	Value	Share
Area	Spring	47	17.5%
Area	Summer	47	17.5%
Area	Autumn	87	32.3%
Area	Winter	88	32.7%
Radius	Spring	90	58.4%
Radius	Summer	15	9.7%
Radius	Autumn	41	26.6%
Radius	Winter	8	5.2%

A thin outer area ring surrounds an inner radius rose at one shared center.

Exact pie values

Series	Sector	Value	Share
Outer area	Spring	87	42.9%
Outer area	Summer	31	15.3%
Outer area	Autumn	29	14.3%
Outer area	Winter	56	27.6%
Inner radius	Spring	37	20.7%
Inner radius	Summer	31	17.3%
Inner radius	Autumn	85	47.5%
Inner radius	Winter	26	14.5%

One sector at a time receives emphasis and a tooltip; reduced-motion preference stops the cycle.

Exact pie values

Series	Sector	Value	Share
Seasons	Spring	13	5.0%
Seasons	Summer	90	34.6%
Seasons	Autumn	94	36.2%
Seasons	Winter	63	24.2%

Spring starts selected; readers can toggle any sector without changing the underlying values.

Exact pie values

Series	Sector	Value	Share
Seasons	Spring	81	49.4%
Seasons	Summer	18	11.0%
Seasons	Autumn	25	15.2%
Seasons	Winter	40	24.4%

Usage Example

@interactivepie.Pie(interactivepie.Config{
  Label: "Rose area",
  Series: []interactivepie.Series{{
    Name: "Seasons", InnerRadius: 40, OuterRadius: 75,
    RoseMode: interactivepie.RoseArea,
    LabelContent: interactivepie.LabelNameAndValue,
    Data: seasonalData,
  }},
})

Accessibility

The figure name comes from Label and Caption remains visible. Every example includes a keyboard-accessible exact-value disclosure with series, sector, value, and share; do not make hover, motion, or color the only route to meaning.

Choose the encoding

A standard pie maps value to angle. A donut reserves a non-data center. Area roses use equal angles and encode values by sector area; radius roses retain proportional angles and add radial variation. Side-by-side and nested series need clearly separated centers or non-overlapping radii.

Interactive capabilities

Hover tooltips, selectable sectors, typed emphasis, and optional rotating emphasis support exploration. Rotating emphasis stops for reduced-motion users. Exact values and shares remain in the adjacent disclosure rather than depending on hover, motion, or color.

Shared controls and modes

Expand, fullscreen, PNG export, hidden/disabled/unwrapped lifecycle modes, resize events, and HTMX replacement behavior come from the shared chart wrapper. Static/vector pie is the better choice for print, server-only delivery, SVG output, or a page that must work without the browser runtime.

Go API

v0.0.1

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso-charts/components/interactive/pie

Enabled, disabled, hidden, and omitted wrapper behavior, controls, export, and client transitions are shared by every chart. Review chart controls, then compare static/vector and interactive capabilities.

Open v0.0.1 API