Sunburst Chart API
Complete API reference for the Sunburst Chart, including data format, configuration options, custom parts, and context methods.
Data Format
A hierarchical tree structure where each node has a label, value, and optional children. Top-level nodes become the primary branches of the sunburst.
type SunburstChartNode = {
label: string;
value: number;
children: SunburstChartNode[];
};
type SunburstChartData = {
nodes: SunburstChartNode[];
};AG Style Config
Sunburst
| Property | Type | Default | Description |
|---|---|---|---|
| sunburst.innerRadiusRatio | number | 0.18 | Inner radius ratio for the center hole (0 to 1). |
| sunburst.strokeColor | string | "white" | Color of segment borders. |
| sunburst.strokeWidth | number | 1 | Width of segment borders. |
| sunburst.hoverStrokeWidth | number | 2 | Stroke width when a segment is hovered. |
| sunburst.hoverShadowColor | string | "rgba(0,0,0,0.20)" | Shadow color on hovered segments. |
| sunburst.dimOpacity | number | 0.32 | Opacity of non-hovered segments when one is hovered. |
Data Label
| Property | Type | Default | Description |
|---|---|---|---|
| dataLabel.visible | boolean | true | Whether data labels on segments are visible. |
| dataLabel.minArcLength | number | 22 | Minimum arc length in pixels for a label to appear. |
| dataLabel.minRingWidth | number | 18 | Minimum ring width in pixels for a label to appear. |
| dataLabel.minFontSize | number | 8 | Minimum font size for data labels. |
| dataLabel.maxFontSize | number | 12 | Maximum font size for data labels. |
| dataLabel.color | string | "white" | Primary text color for data labels. |
| dataLabel.secondaryColor | string | "rgba(255,255,255,0.82)" | Secondary text color for value portion of labels. |
| dataLabel.fontWeight | string | "600" | Font weight for data labels. |
| dataLabel.formatter | (args: { label, value, depth, path, branchLabel }) => { label: string; value?: string } | Shows label and formatted value | Formatter function for data label content. |
Toast Style Config
Sunburst
| Property | Type | Default | Description |
|---|---|---|---|
| sunburst.innerRadiusRatio | number | 0.18 | Inner radius ratio for the center hole (0 to 1). |
| sunburst.strokeColor | string | "transparent" | Color of segment borders. |
| sunburst.strokeWidth | number | 0 | Width of segment borders. |
| sunburst.hoverBorderColor | string | "white" | Border color when a segment is hovered. |
| sunburst.hoverBorderWidth | number | 4 | Border width when a segment is hovered. |
| sunburst.hoverShadowColor | string | "rgba(0,0,0,0.30)" | Shadow color on hovered segments. |
| sunburst.dimOpacity | number | 1 | Opacity of non-hovered segments when one is hovered. |
Data Label
| Property | Type | Default | Description |
|---|---|---|---|
| dataLabel.visible | boolean | true | Whether data labels on segments are visible. |
| dataLabel.minArcLength | number | 24 | Minimum arc length in pixels for a label to appear. |
| dataLabel.minRingWidth | number | 20 | Minimum ring width in pixels for a label to appear. |
| dataLabel.minFontSize | number | 8 | Minimum font size for data labels. |
| dataLabel.maxFontSize | number | 13 | Maximum font size for data labels. |
| dataLabel.color | string | "white" | Primary text color for data labels. |
| dataLabel.secondaryColor | string | "rgba(255,255,255,0.86)" | Secondary text color for value portion of labels. |
| dataLabel.fontWeight | string | "700" | Font weight for data labels. |
| dataLabel.formatter | (args: { label, value, depth, path, branchLabel }) => { label: string; value?: string } | Shows label and formatted value | Formatter function for data label content. |
Custom Parts
Override any visual element by providing a custom builder function: (args, context) => Widget
| Part | Args | Description |
|---|---|---|
| layout | { title: Widget; legends: Widget[]; plot: Widget } | Top-level layout composing title, legends, and the plot area. |
| plot | { dataView: Widget; tooltipArea: Widget } | The plot area with data view and tooltip. |
| dataView | { segments: SunburstChartSegment[] } | Container for all sunburst segments. |
| segment | FlatSegment & { dataLabel: Widget; isHovered: boolean } | Individual sunburst segment with depth, angles, and path info. |
| dataLabel | FlatSegment & { isHovered: boolean } | Data label on a sunburst segment. |
| legend | { name: string; index: number; isVisible: boolean } | Individual legend item. |
| title | undefined | Chart title element. |
| tooltip | HoveredSunburstSegment | Tooltip content for a hovered segment. |
| tooltipArea | { tooltip: Widget | null; hoveredSegment: HoveredSunburstSegment | null } | Tooltip positioning area. |
Context: SunburstChartContext
Available in every custom builder via the second argument.
| Name | Type | Kind | Description |
|---|---|---|---|
| data | SunburstResolvedData | property | Current resolved chart data (filtered by hidden branches). |
| segments | FlatSegment[] | property | Flattened list of all visible segments with computed angles. |
| legends | string[] | property | All top-level branch labels. |
| totalValue | number | property | Sum of all visible branch values. |
| width | number | property | Current chart width in pixels. |
| height | number | property | Current chart height in pixels. |
| hoveredSegmentKey | string | null | property | Key of the currently hovered segment. |
| hoveredSegment | FlatSegment | null | property | Currently hovered segment data. |
| config | TConfig | property | The resolved chart configuration object. |
| isLegendVisible(index) | (index: number) => boolean | method | Check if a top-level branch is visible. |
| toggleLegend(index) | (index: number) => void | method | Toggle visibility of a top-level branch. |
| hoverSegment(key) | (key: string) => void | method | Set hover state on a segment by key. |
| unhoverSegment(key?) | (key?: string) => void | method | Clear hover on a segment. |
| unhoverAllSegments() | () => void | method | Clear all segment hover state. |
| isSegmentHovered(key) | (key: string) => boolean | method | Check if a specific segment is hovered. |
| setSize(width, height) | (width: number, height: number) => void | method | Update chart dimensions. |
Custom Part Example
import { ToastSunburstChart } from "@/components/flitter/charts/toast-sunburst-chart";
<ToastSunburstChart
data={data}
config={{
sunburst: { innerRadiusRatio: 0.25 },
dataLabel: { visible: true },
}}
/>