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.
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.1The 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/sunburstEnabled, 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.