Interactive sunburst

Weighted parent-child hierarchy shown as concentric sectors and nested branches.

Purpose: Explore a weighted hierarchy as concentric radial sectors.
Use when: A compact overview of a shallow hierarchy and its branch proportions is useful.
Avoid when: Deep hierarchies, close comparisons, or a clear reading order matter; use a tree or table.
Equivalent data: Use the adjacent path-and-value table to inspect the same hierarchy with keyboard navigation and without relying on the radial graphic.

Default Rendered example

Seven parent nodes, each paired with one child. Select a sector to focus the hierarchy; select the center to return.

Exact hierarchy and values

Path	Parent	Value
parent-0	—	0.81
parent-0 / child-0	parent-0	0.34
parent-1	—	0.62
parent-1 / child-1	parent-1	0.57
parent-2	—	0.45
parent-2 / child-2	parent-2	0.73
parent-3	—	0.93
parent-3 / child-3	parent-3	0.28
parent-4	—	0.38
parent-4 / child-4	parent-4	0.66
parent-5	—	0.71
parent-5 / child-5	parent-5	0.49
parent-6	—	0.54
parent-6 / child-6	parent-6	0.87

Usage Example

@interactivesunburst.Sunburst(interactivesunburst.Config{
  Label: "Basic sunburst example",
  Caption: "Seven parent nodes, each paired with one child.",
  Nodes: []*interactivesunburst.Node{
    {Name: "parent-0", Value: 0.81, Children: []*interactivesunburst.Node{
      {Name: "child-0", Value: 0.34},
    }},
	{Name: "parent-1", Value: 0.62, Children: []*interactivesunburst.Node{{Name: "child-1", Value: 0.57}}},
	{Name: "parent-2", Value: 0.45, Children: []*interactivesunburst.Node{{Name: "child-2", Value: 0.73}}},
	{Name: "parent-3", Value: 0.93, Children: []*interactivesunburst.Node{{Name: "child-3", Value: 0.28}}},
	{Name: "parent-4", Value: 0.38, Children: []*interactivesunburst.Node{{Name: "child-4", Value: 0.66}}},
	{Name: "parent-5", Value: 0.71, Children: []*interactivesunburst.Node{{Name: "child-5", Value: 0.49}}},
    {Name: "parent-6", Value: 0.54, Children: []*interactivesunburst.Node{
      {Name: "child-6", Value: 0.87},
    }},
  },
  Navigation: interactivesunburst.NavigationDrillDown,
  Sort: interactivesunburst.SortDescending,
  LabelOptions: &chart.LabelOptions{Show: chart.Bool(true), Position: "inside", FontSize: 10},
  InnerRadius: 16,
  OuterRadius: 88,
  Width: "100%",
  Height: "32rem",
  Style: charttheme.Style{Class: "max-w-full"},
  RootAttrs: templ.Attributes{"data-chart-purpose": "hierarchy"},
})

Explore the hierarchy

Visual drill-down can focus a branch, but it is not the accessible navigation path. Use the keyboard-accessible adjacent table to inspect every parent-child path and value.

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

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