Sunburst Chart widget

Shows hierarchy through a series of rings, that are sliced for each category node.

https://kroki.io/svgbob/svg/eNpT0NPFAvS4FGoUFBSCS_OSSouKSxScMxKLSoACNUBxbOpruHTzFVISSxIVQKA4NSc1uSQzP08hXxckAeErIAOgQerYDFIHAHzlIOE=

In-ports

data JSON - the input data.

select Array - an array of segment IDs to be selected (highlighted) in the chart.

Out-ports

selection Array - emits an array of IDs of the selected segments.

Overview

Sunburst Chart widget is a type of visualization that shows hierarchy through a series of rings, that are sliced for each category node. Each ring corresponds to a level in the hierarchy, with the central circle representing the root node and the hierarchy moving outwards from it.

https://cdn.sanity.io/images/n16unevp/production/242568d99e5c2a31ce926264c832194363d4eb2e-2000x970.png?w=1000&fit=max

Here is the dataset that defines the above chart configuration:

{
"id": "X0",
"name": "Total",
"children": [
{
"id": "admin",
"name": "Administrative",
"value": 101,
"children": []
},
{
"id": "Other",
"name": "Other",
"value": 127
},
{
"id": "primary",
"name": "Primary",
"value": 11
},
{
"id": "minor",
"name": "Secondary",
"value": 99
}
]
}

Each segment of the chart can have the following attributes:

AttributeDescription
valueRequired. The numerical value of the segment.
nameThe name of the segment.
colorThe Hex color code for the segment.
childrenThe array of segment objects. Optional.

The value of the segment is calculated automatically as a sum of all the segment values of its children. If colors are not specified in the data, the default colors will be applied. Names will appear on the legend and on the tooltip of each segment.

Settings

Title

The widget title.

Minimum Arc Area

Minimum segment size in percentages.

Require selection of an arc?

If turned on, at least one segment must be always selected.

Value formatter

Specify the converter for numeric values. See Value Formatters to learn how to format values of different types.

Tooltip Percent Value

Specify the display parameters of tooltip percent values.

  • Always show fractional digits? - If turned on, displays of fractional numbers in the tooltip.
  • Number of fractional digits - Specify the number of digits to display.

Percent Value

Specify the display parameters of segment percent values.

  • Always show fractional digits? - If turned on, displays of fractional numbers in the tooltip.
  • Number of fractional digits - Specify the number of digits to display.

Enable selection of multiple arcs?

Enable or disable multiple choice.

Expand arc upon selection?

If turned on, selected segment will be expanded as root.

Enable sorting by value?

If turned on, segments will be ordered by value clockwise.

Calculate arc's percent value relative to total value?

If turned on, segment percent value is calculated relative to the total value.

Enable enhancements for print?

Turn it on if the chart is intended for print.

Hide progress bar

Controls the visibility of widget progress bar. By default, widget progress bar is visible.

Hide help icon

Controls the visibility of help icon. By default, help icon is visible.

Related