Sunburst

dvtm:sunburst

The Sunburst shows an overview of hierarchical data values as a series of concentric rings divided into sectors ("slices"). When displaying a hierarchy, hierarchy nodes are laid out radially, with the higher levels at the center and deeper leaves farther away from the center.

These components are used on tablets and phones.

Appearance

Appearance characteristics for this component.

Segments: This chart supports a pie that has different segments and a donut hole.

Behavior

Common behaviors for this component.

Press and Hold: All charts support a press and hold (i.e. rollover) behavior where all data is dimmed except the selected data. Dimming does not apply to Funnel Chart and Sunburst.
Selection: All charts have an option for single data selection, multiple data selection or no data selection.
Render: All charts have an option to show or hide chart data based on tapping the corresponding legend item.

Usage

Usage guidelines for this component.

A Sunburst is used to compare large data sets. Sunburst sectors have two primary dimensions under which to measure data: size and color.
Size is often used to measure an absolute number, such as number of units sold, that can compare the object to other objects.
Color is often used to measure a relative number, such as price change from last year, that can compare the object to itself.
Showing sector labels is recommended. Labels should be categorical, not quantitative, as the size and color of the sectors of the sunburst describe quantitative data.
Due to limited space, labels should be kept short to avoid truncation. Labels should use the fewest words possible to identify the sector contents.
Preferred placement for labels is vertically and horizontally centered inside the sector.
Individual labels on sectors can be used when there is little risk of crowding, for instance, there are few sectors with more or less evenly distributed data. If there are many sectors with widely varying sizes, the labels should be turned off and the label should instead be put inside the tooltip.
Tooltips may be used instead of labels when labels would create too much crowding, for example when there are many sectors with widely varying sizes.

Sample

DVTM sample code for this component.

 <dvtm:sunburst
    id="sunburst1"
    value="#{bindings.sunburstData.collectionModel}"
    var="row"
    animationDuration="#{pageFlowScope.animationDuration}"
    animationOnDataChange="#{pageFlowScope.animationOnDataChange}"
    animationOnDisplay="#{pageFlowScope.animationOnDisplay}"
    colorLabel="#{pageFlowScope.colorLabel}"
    emptyText="#{pageFlowScope.emptyText}"
    inlineStyle="#{pageFlowScope.inlineStyle}"
    nodeSelection="#{pageFlowScope.nodeSelection}"
    rendered="#{pageFlowScope.rendered}"
    rotation="#{pageFlowScope.rotation}"
    shortDesc="#{pageFlowScope.shortDesc}"
    sizeLabel="#{pageFlowScope.sizeLabel}"
    sorting="#{pageFlowScope.sorting}"
    rotationAngle="#{pageFlowScope.startAngle}"
    styleClass="#{pageFlowScope.styleClass}"
    legendSource="ag1">

    <dvtm:sunburstNode
    id="node1"
    fillPattern="#{pageFlowScope.fillPattern}"
    label="#{row.label}"
    labelDisplay="#{pageFlowScope.labelDisplay}"
    value="#{pageFlowScope.showRadius ? 1 : row.marketShare}"
    labelHalign="#{pageFlowScope.labelHalign}"
    radius="#{pageFlowScope.showRadius ? row.booksCount : 1}">

    <dvtm:attributeGroups
    id="ag1"
    type="color"
    value="#{row.deltaInPosition}"
    attributeType="continuous"
    minLabel="-1.5%"
    maxLabel="+1.5%"
    minValue="-1.5"
    maxValue="1.5">

    <amx:attribute name="color1" value="#ed6647" />

    <amx:attribute name="color2" value="#f7f37b" />

    <amx:attribute name="color3" value="#68c182" />

    </dvtm:attributeGroups>

    </dvtm:sunburstNode>

    </dvtm:sunburst>

Used On: Phone, Tablet
Also Called: Starburst
Related Components: Gauge
Resources: None

Fig 1. iOS and Android - Sunburst