The Sunburst Chart component for Retool Apps

A content area to display sunburst charts.

The Sunburst Chart component renders hierarchical data in a series of concentric rings. Sunburst Chart is useful for visualizing parent-child relationships and how parts make up a whole.

Demo

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

`chartType`

The type of chart to display.

Type string

Format Plain Text

Configurability Inspector > Content > Series > Chart type

Allowed Values

Value	UI Option	Description
`bar`	Bar	Bar Chart or Stacked Bar Chart.
`bubble`	Bubble	Bubble Chart.
`funnel`	Funnel	Funnel Chart.
`heatmap`	Heatmap	Heat Map.
`line`	Line	Line Chart or Sparkline.
`mixed`	Mixed	Mixed Chart.
`pie`	Pie	Pie Chart.
`plotlyJson`	Plotly JSON	Plotly JSON Chart.
`sankey`	Sankey	Sankey Chart.
`scatter`	Scatter	Scatter Chart.
`sunburst`	Sunburst	Sunburst Chart.
`treemap`	Treemap	Treemap.
`waterfall`	Waterfall	Waterfall Chart.

Default null

Examples

"bar"

`clearOnEmptyData`

Whether to clear the chart when the data is empty.

Type	boolean
Format	True/False
Configurability	Inspector > Content > Clear when data is empty
Default	`false`

Examples

true

`colorArray`

A list of colors to use when colorInputMode is colorArray.

Type	array
Format	Color
Array values	string
Configurability	Inspector
Default	`null`

Examples

["#ff0000", "#00ff00", "#0000ff"]

`colorArrayDropDown`

A list of colors to use when colorInputMode is colorArrayDropDown.

Type	array
Format	Color
Array values	string
Configurability	Inspector > Appearance > Color selection
Default	`null`

Examples

["#ff0000", "#00ff00", "#0000ff"]

`colorInputMode`

The mode for the color input.

Type string

Format Plain Text

Configurability Inspector > Appearance > Color selection

Allowed Values

Value	UI Option	Description
`colorArray`	Array	Color array.
`gradientColorArray`	Palette	Gradient color array.
`colorArrayDropDown`	Manual	Color array dropdown.

Default colorArray

Examples

"colorArray"

`datasource`

The source data when using UI Form.

Type	array
Array values	object
Configurability	Inspector
Default	`null`

`datasourceMode`

The data source mode.

Type string

Configurability Read-only

Allowed Values

Value	Description
`manual`	Manual.
`source`	Source.

Default null

`events`

A list of configured event handlers that trigger actions or queries.

Type	array
Array values	object
Configurability	Inspector > Interaction > Event handlers
Default	`null`

Array Object Properties

`event`

The event that triggers the action. Refer to the events section for details of available events for this object.

Type	string
Configurability	Inspector > Interaction > Event handlers > Event
Default	`null`

`method`

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type	string
Configurability	Inspector > Interaction > Event handlers > Edit event handler > Run script actions
Default	`null`

`type`

The type of action to perform.

Type string

Configurability Inspector > Interaction > Event handlers > Edit event handler > Action

Allowed Values

Value	Description
`datasource`	Control query.
`widget`	Control component.
`script`	Run script.
`state`	Set variable.
`localStorage`	Set localStorage.
`util`	Perform utility action (e.g., Open URL or Confetti).

Default null

`gradientColorArray`

A list of colors to use when colorInputMode is gradientColorArray.

Type	array
Format	Color
Array values	string
Configurability	Inspector > Appearance > Color selection
Default	`null`

`hidden`

Whether this object is hidden from view.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Hidden
Default	`false`

Examples

true

`hoverTemplate`

The tooltip template for displaying information when you hover over a point.

Type	string
Format	Plain Text
Configurability	Inspector > Content > Add-ons > Tooltip
Default	`%{value}<br>%{percent}<extra></extra>`

Examples

%{value}<br>%{percent}<extra></extra>

`hoverTemplateMode`

Whether the hover tooltip text maps from available options or is manually specified.

Type string

Format Plain Text

Configurability

Inspector > Content > Add-ons > Tooltip

Allowed Values

Value	Description
`source`	Source mode.
`manual`	Manual mode.

Default null

`id`

The unique identifier (name).

Type	string
Format	Plain Text
Configurability	Inspector
Default	`sunburstChart1`

Examples

query1

button1

`isHiddenOnDesktop`

Whether to show or hide this object in the desktop layout.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Show on desktop
Default	`false`

Examples

true

`isHiddenOnMobile`

Whether to show or hide this object in the mobile layout.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Show on mobile
Default	`true`

Examples

true

`labelData`

A list of labels for each node.

Type	array
Array values	string
Configurability	Inspector > Content > Labels
Default	`[]`

Examples

["Node 1", "Node 2", "Node 3"]

`labelDataMode`

Whether labels map from a selected option or are manually specified.

Type string

Format Plain Text

Configurability

Inspector > Content > Labels

Allowed Values

Value	Description
`source`	Source mode.
`manual`	Manual mode.

Default null

`legendPosition`

The position of the legend.

Type string

Configurability Inspector > Content > Add-ons > Legend position

Allowed Values

Value	UI Option	Description
`top`	Align top	Top.
`right`	Align right	Right.
`bottom`	Align bottom	Bottom.
`left`	Align left	Left.
`none`	No legend	None.

Default null

`lineWidth`

The width of the line.

Type	number
Configurability	Read-only
Default	`null`

`maintainSpaceWhenHidden`

Whether to take up space on the canvas if hidden is true.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Maintain space when hidden
Default	`false`

Examples

true

`margin`

The amount of margin to render outside.

Type string

Format Plain Text

Configurability

Inspector > Spacing > Margin

Allowed Values

Value	UI Option	Description
`4px 8px`	Normal	Normal margin.
`0`	None	No margin.

Default 4px 8px

Examples

4px 8px

`paperBgColor`

The paper background color.

Type	string
Configurability	Read-only
Default	`null`

`parentData`

The parent to which a given node is associated.

Type	array
Array values	string
Configurability	Inspector
Default	`null`

`parentDataMode`

(No description available)

Type	unknown
Configurability	Read-only
Default	`null`

`plotBgColor`

The plot background color.

Type	string
Configurability	Read-only
Default	`null`

`selectedPoints`

A list of selected points.

Type	array
Configurability	Read-only
Default	`null`

`showInEditor`

Whether the component remains visible in the editor if hidden is true.

Type	boolean
Format	True/False
Configurability	Inspector > Appearance > Advanced > Always show in edit mode
Default	`false`

Examples

true

`sunburstDataBranchValues`

The branch values for the Sunburst Chart.

Type string

Configurability Inspector

Allowed Values

Value	Description
`remainder`	The remainder branch values.
`total`	The total of the branch values.

Default null

`sunburstDataLeafOpacity`

The opacity of the leaf nodes in the Sunburst Chart.

Type	number
Configurability	Inspector
Default	`null`

`textTemplate`

The format to use for data labels, constructed in Plotly template format.

Type	string
Configurability	Inspector > Content > Add-ons > Data labels > Data label
Default	`null`

`textTemplateMode`

Whether the text template is in manual mode.

Type string

Format Plain Text

Configurability Read-only

Allowed Values

Value	Description
`source`	Source mode.
`manual`	Manual mode.

Default null

`textTemplatePosition`

The orientation of the data labels.

Type string

Configurability Inspector > Content > Add-ons > Data labels > Orientation

Allowed Values

Value	Description
`radial`	Radial orientation.
`horizontal`	Horizontal orientation.
`vertical`	Vertical orientation.

Default null

`toolbar`

The toolbar configuration.

Type	object
Configurability	Inspector > Content > Add-ons > Toolbar
Default	`null`

Object Properties

`showAutoscale`

Whether to show the Autoscale button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showBoxSelect`

Whether to show the Box select button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showLassoSelect`

Whether to show the Lasso select button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showPan`

Whether to show the Pan button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showResetViews`

Whether to show the Reset view button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showToImage`

Whether to show the Download as PNG button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showZoomIn`

Whether to show the Zoom in button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showZoomOut`

Whether to show the Zoom out button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`showZoomSelect`

Whether to show the Zoom select button.

Type	boolean
Format	True/False
Configurability	Inspector
Default	`null`

Examples

true

`valueData`

The value for a specific node.

Type	array
Array values	number
Configurability	Inspector
Default	`null`

`valueDataMode`

Whether values map from a selected option or are manually specified.

Type string

Format Plain Text

Configurability

Inspector > Content > Values

Allowed Values

Value	Description
`source`	Source mode.
`manual`	Manual mode.

Default null

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

`sunburstChart.scrollIntoView()`

Scrolls the canvas or parent container so that the selected component appears in the visible area.

Definition
sunburstChart.scrollIntoView(options)

Parameters

`options`

The scroll options.

Type

object

Object Properties

`behavior`

The scroll behavior.

Type string

Allowed Values

Value	Description
`auto`	Scroll immediately to the specified position.
`smooth`	Scroll gradually to the specified position.

`block`

The scroll position relative to the component.

Type string

Allowed Values

Value	Description
`nearest`	Scrolls only the minimum amount required for the component to appear in the visible area. Scrolling does not occur if the component is already in view.
`start`	Scrolls to position the component at the top of the visible area.
`center`	Scrolls to position the component in the middle of the visible area.
`end`	Scrolls to position the component at the bottom of the visible area.

Examples

Scroll the minimum amount to immediately bring sunburstChart into view.

sunburstChart.scrollIntoView({behavior: 'auto', block: 'nearest'});

`sunburstChart.setHidden()`

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition
sunburstChart.setHidden(hidden)

Parameters

`hidden`

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	`false`

Examples

true

Examples

Hide sunburstChart.

sunburstChart.setHidden(true);

Unhide sunburstChart.

sunburstChart.setHidden(false);

Events

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

Event	Description
Clear	A value is cleared.
Hover	An item is hovered over.
Legend Click	A legend item is clicked or pressed.
Legend Double Click	A legend item is double-clicked or pressed.
Select	A value is selected.
Unhover	An item is no longer hovered over.

Properties​

chartType​

clearOnEmptyData​

colorArray​

colorArrayDropDown​

colorInputMode​

datasource​

datasourceMode​

events​

event​

method​

type​

gradientColorArray​

hidden​

hoverTemplate​

hoverTemplateMode​

id​

isHiddenOnDesktop​

isHiddenOnMobile​

labelData​

labelDataMode​

legendPosition​

lineWidth​

maintainSpaceWhenHidden​

margin​

paperBgColor​

parentData​

parentDataMode​

plotBgColor​

selectedPoints​

showInEditor​

sunburstDataBranchValues​

sunburstDataLeafOpacity​

textTemplate​

textTemplateMode​

textTemplatePosition​

toolbar​

showAutoscale​

showBoxSelect​

showLassoSelect​

showPan​

showResetViews​

showToImage​

showZoomIn​

showZoomOut​

showZoomSelect​

valueData​

valueDataMode​

Methods​

sunburstChart.scrollIntoView()​

options​

behavior​

block​

sunburstChart.setHidden()​

hidden​

Events​

Properties

`chartType`

`clearOnEmptyData`

`colorArray`

`colorArrayDropDown`

`colorInputMode`

`datasource`

`datasourceMode`

`events`

`event`

`method`

`type`

`gradientColorArray`

`hidden`

`hoverTemplate`

`hoverTemplateMode`

`id`

`isHiddenOnDesktop`

`isHiddenOnMobile`

`labelData`

`labelDataMode`

`legendPosition`

`lineWidth`

`maintainSpaceWhenHidden`

`margin`

`paperBgColor`

`parentData`

`parentDataMode`

`plotBgColor`

`selectedPoints`

`showInEditor`

`sunburstDataBranchValues`

`sunburstDataLeafOpacity`

`textTemplate`

`textTemplateMode`

`textTemplatePosition`

`toolbar`

`showAutoscale`

`showBoxSelect`

`showLassoSelect`

`showPan`

`showResetViews`

`showToImage`

`showZoomIn`

`showZoomOut`

`showZoomSelect`

`valueData`

`valueDataMode`

Methods

`sunburstChart.scrollIntoView()`

`options`

`behavior`

`block`

`sunburstChart.setHidden()`

`hidden`

Events