Pie chart

Static/vector part-to-whole summaries with pie, area-scaled radius, and doughnut treatments.

Purpose: Summarize a small categorical distribution as parts of one total.
Use when: Use when there are few, clearly distinct slices and the part-to-whole relationship matters more than close ranking.
Avoid when: Avoid for many slices, negative values, or small differences; a bar chart is easier to compare precisely.
Equivalent data: Every treatment retains an adjacent exact-value and share table. Slice names, values, totals, and label meaning never depend on geometry or color alone.

Default Rendered example

Five named channels shown as shares of one total.

Exact slice values

Slice	Value	Share of total
Search Engine	1048	33.30155703844932%
Direct	735	23.355576739752145%
Email	580	18.430251032729583%
Union Ads	484	15.379726723863998%
Video Ads	300	9.532888465204957%

Usage Example

@pie.Pie(pie.Config{
  Label: "Pie Chart",
  Title: pie.TitleOptions{Text: "Pie Chart", Subtitle: "(Fake Data)", Placement: pie.PlacementCenter},
  Legend: pie.LegendOptions{Orientation: pie.LegendVertical, LeftPercent: 80, VerticalPlacement: pie.VerticalPlacementBottom},
  Slices: []pie.Slice{{Name: "Search Engine", Value: 1048}, {Name: "Direct", Value: 735}, {Name: "Email", Value: 580}, {Name: "Union Ads", Value: 484}, {Name: "Video Ads", Value: 300}},
  Width: 600, Height: 400,
})

Area-scaled radii

A rose-style treatment scales each radius by the square root of its value, so visible radius area carries the same value order while sector angles retain part-to-whole meaning. Use this redundant encoding only when it helps broad comparison; consult exact values for close differences.

Area-scaled radii Rendered example

Slice radii scale by the square root of each value while angles retain part-to-whole proportions.

Exact slice values

Slice	Value	Share of total
Search Engine	1048	33.30155703844932%
Direct	735	23.355576739752145%
Email	580	18.430251032729583%
Union Ads	484	15.379726723863998%
Video Ads	300	9.532888465204957%

Area-scaled radii

@pie.Pie(pie.Config{
  Label: "Area-scaled Pie Chart", Slices: slices,
  Radius: pie.RadiusOptions{OuterPixels: 120, Scale: pie.RadiusScaleArea},
  Width: 600, Height: 400,
})

Segment spacing

Explicit slice gaps separate adjacent sectors. Spacing is presentation only and does not change totals, order, labels, or exact shares.

Segment spacing Rendered example

Sixteen-pixel separation distinguishes adjacent slices without changing their values.

Exact slice values

Slice	Value	Share of total
Search Engine	1048	33.30155703844932%
Direct	735	23.355576739752145%
Email	580	18.430251032729583%
Union Ads	484	15.379726723863998%
Video Ads	300	9.532888465204957%

Segment spacing

@pie.Pie(pie.Config{
  Label: "Pie Chart With Segment Gap", Slices: slices,
  SegmentGap: 16,
  Legend: pie.LegendOptions{Hidden: true},
  Width: 600, Height: 400,
})

Doughnut treatment

Open the center with an inner radius relative to the outer ring while preserving the same five values, title, legend, exact-value summary, theme tokens, controls, and exports.

Doughnut treatment Rendered example

The open center preserves the same five part-to-whole values.

Exact slice values

Slice	Value	Share of total
Search Engine	1048	33.30155703844932%
Direct	735	23.355576739752145%
Email	580	18.430251032729583%
Union Ads	484	15.379726723863998%
Video Ads	300	9.532888465204957%

Doughnut treatment

@pie.Pie(pie.Config{
  Label: "Doughnut Chart", Variant: pie.VariantDoughnut,
  InnerRadiusPercent: 60, Slices: slices,
  Width: 600, Height: 400,
})

Outside and inside labels

Exterior labels maximize room around the ring. Inside labels use the open center for a compact square treatment; both keep the adjacent table as the accessible source of exact names, values, and shares.

Outside and inside labels Rendered example

Exterior labels remain connected to slices across a twenty-four-pixel segment gap.

Exact slice values

Slice	Value	Share of total
Direct	1048	33.30155703844932%
Search Engine	735	23.355576739752145%
Referral	580	18.430251032729583%
Email	484	15.379726723863998%
Video Ads	300	9.532888465204957%

Slice labels move into the enlarged center while exact values remain adjacent.

Exact slice values

Slice	Value	Share of total
Direct	1048	33.30155703844932%
Search Engine	735	23.355576739752145%
Referral	580	18.430251032729583%
Email	484	15.379726723863998%
Video Ads	300	9.532888465204957%

Outside and inside labels

outside := pie.Config{Label: "Labels Outside", Variant: pie.VariantDoughnut, InnerRadiusPercent: 60, SegmentGap: 24, Legend: pie.LegendOptions{Hidden: true}, Slices: slices}
inside := pie.Config{Label: "Labels Inside", Variant: pie.VariantDoughnut, InnerRadiusPercent: 80, Labels: pie.LabelOptions{Placement: pie.LabelPlacementInside}, Legend: pie.LegendOptions{Hidden: true}, Slices: slices}

@pie.Pie(outside)
@pie.Pie(inside)

Center total and overlay legend

A compact humanized total occupies the center while slice labels are hidden and an overlay legend names every channel. The exact table preserves the unrounded total and each contribution.

Center total and overlay legend Rendered example

A compact total occupies the center; slice labels are hidden and the legend names every channel.

Exact slice values

Slice	Value	Share of total
Direct	1048	33.30155703844932%
Search Engine	735	23.355576739752145%
Referral	580	18.430251032729583%
Email	484	15.379726723863998%
Video Ads	300	9.532888465204957%

Center total and overlay legend

@pie.Pie(pie.Config{
  Label: "Legend", Variant: pie.VariantDoughnut, InnerRadiusPercent: 80,
  SegmentGap: 8, Labels: pie.LabelOptions{Hidden: true},
  Center: pie.CenterOptions{Content: pie.CenterContentTotal, Prefix: "Total Response: ", Format: pie.ValueFormatHumanized, Decimals: 2, FontSize: 12},
  Legend: pie.LegendOptions{VerticalPlacement: pie.VerticalPlacementBottom, Overlay: true},
  Slices: slices,
})

Static/vector behavior

Pie renders inline SVG on the server, follows both Goshtoso themes in light and dark mode, supports decoded SVG and opaque or transparent PNG download through the shared wrapper, and remains readable in print or without chart JavaScript. Wrapper lifecycle and delivery-mode choices stay in the shared chart controls and chart modes guides.

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/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