Sunburst Charts
Overview
JavaScript sunburst charts or graphs display data as proportional slices of a circular pie surrounded by hierarchical rings. They are also known as Multi-level pie charts, Ring Charts, and Radial Treemaps. You can create interactive sunburst charts by incorporating features such as animation, legends, and drilldown. Browse our ZingChart Gallery for inspiration and ideas.
Chart Type
To specify the chart type, add a type
attribute to the chart object and provide the value: sunburst
. Our standard sunburst chart is specified by the sunburst
value. Without further modification, here is how the default sunburst chart appears.

{
type: 'sunburst',
title: {
text: "Sunburst Chart"
},
series: chartData
}
Series Data
Provide your chart data in the series
array. In the series array, create an object and assign a value to id
, text
, parent
, and the optional value
attribute. id
is the section where the series data object will be placed, text
is the text that will be displayed in that section, parent
is the parent section of the section you are adding data to, and value
is the numerical value of the data object being added.
series: [
{id: 'flare', text: 'flare', parent: ''},
{id: 'analytics', text: 'analytics', parent: 'flare'},
{id: 'cluster', text: 'cluster', parent: 'analytics'},
{id: 'agglomerativecluster', text: 'AgglomerativeCluster', parent: 'cluster', value: 3938},
...,
{id: 'someId', text: 'someText', parent: 'someParent', values: [someValue]}
]
Note that you can have ZingChart automatically order your sunburst slices, from largest to smallest. Create a plot
object and add a layout
attribute. Set the value to auto
. (This attribute also sets the sunburst chart’s default reference angle to 12 o'clock, or zero degrees. For more information, see the Reference Angle section below.)
Basic Elements
Once you've provided your sunburst chart type and data, you can configure the chart's basic elements such as the aperture, reference angle, size factor, donut ring size, how sunburst slices are detached, offset, and/or clicked, and more.
Scale Configuration
Use the scale-r
object to set the sunburst chart's aperture and reference angle. Use the scale
object to set the size factor.
Aperture
The sunburst chart is sized to 360 degrees (i.e., a circle) by default. You can change this by adding an aperture
attribute to the scale-r
object. Provide the desired aperture value, e.g., 180 is a half circle, 90 is a quarter circle, and so on.

{
type: 'sunburst',
title: {
text: "'aperture' attribute"
},
'scale-r': {
aperture:300
},
series: chartData
}
Reference Angle
The reference angle (or starting point) of our sunburst charts is set to 90 degrees (or 3 o'clock) by default. Add a ref-angle
attribute to the scale-r
object to change this. Provide the desired value, keeping in mind that the value is relative to the default starting angle. E.g., providing a value of 270 would make the first sunburst slice appear at the 12 o'clock position. See the below chart.

{
type: 'sunburst',
title: {
text: "'ref-angle' attribute"
},
'scale-r': {
'ref-angle':270 //relative to the starting 90 degree position.
},
series: chartData
}
'lternatively, you can have the reference angle automatically set to zero and have the sunburst slices automatically sorted by size, from largest to smallest, by adding a layout': "auto
attribute to the plot
object. See the below chart.

{
type: 'sunburst',
title: {
text: "'layout' attribute in 'plot' object"
},
plot: {
layout: "auto" //to order pie slices by size and have reference angle start at zero.
},
series: chartData
}
Chart-Specific
Sunburst chart-specific customizations include modifying the size of the donut ring, allowing for the reattachment of detached sunburst slices, setting up offset sunburst slices, and disabling the detachment of clicked sunburst slices.
Offset Slices
Use the offset-r
attribute to pull out one or more slices from the rest of the sunburst. Often referred to as an exploded sunburst chart, the attribute can be applied globally (plot
object) or locally (series
object). Provide the sunburst slice offset as a percentage or pixel value.

{
type: "sunburst",
title: {
text: "'offset-r' attribute"
},
plot: {
'offset-r': "10%"
},
series: chartData
}
Plot/Series Styling
You can style the borders of the sunburst slices using the border-width
, border-color
, line-style
, alpha
, and other styling attributes. Refer to the Plot/Series Styling Tutorial and the Plot/Series JSON page for further information and a full attribute list.

{
type: 'sunburst',
title: {
text: "Sunburst Chart Styling"
},
plot: {
'border-width': 1,
'border-color': "#cccccc",
'line-style': "dotted"
},
series: chartData
}
Tokens
Tokens (or string interpolation) are highly useful when customizing sunburst chart tooltips and value boxes. Commonly used sunburst chart tokens include:
Token | Description |
---|---|
%data-_____ | Format for custom tokens. The custom token is defined in the plot or series object as an attribute or array using the "data" prefix, e.g., data-year . It is then recalled in the tooltips or value boxes, e.g., %data-year . |
%node-percent-value %npv | The percentage value of the sunburst slice (node) relative to the entire pie (sum of all nodes). |
%node-value %v | The sunburst slice (node) value. |
%pie-total-value | The sum of all the sunburst slice (node) values. |
%plot-description | The description of the current plot, pulled from the description attribute in the plot/series object. |
%plot-text %t | The text of the current plot, pulled from the text attribute in the plot/series object. |
Refer to the Tokens Tutorial for a full list of available tokens.
Tooltips
Tooltips appear when you hover over the sunburst slices. Create a tooltip
object in the plot
object to customize the text and styling. Refer to the Tooltips Tutorial and Tooltips JSON page for more information and a full attribute list.

{
type: 'sunburst',
title: {
text: "Tooltips"
},
subtitle: {
text: "Hover over the sunburst slices",
'font-weight': "normal"
},
plot: {
tooltip: {
text: "%t: %v (%npv%)",
'font-color': "black",
'font-family': "Georgia",
'text-alpha':1,
'background-color': "white",
alpha:0.7,
'border-width': 1,
'border-color': "#cccccc",
'line-style': "dotted",
'border-radius': "10px",
padding: "10%",
placement: "node:out" //"node:out" or "node:center"
},
...omitted for brevity...
},
series: chartData
}
Value Boxes
Value boxes are fixed labels that appear adjacent to the sunburst slices. Create a value-box
object in the plot
object to customize the text
, placement
(in
, out
, center
), and styling. You can also incorporate rules. Refer to the Value Boxes Tutorial and the Value Boxes JSON page for more information and a full attribute list.
In the below chart, rules were used to place value boxes in
or out
of the chart based on their value.
Tip: Value boxes placed outside the sunburst slices are automatically drawn with connecting lines. To remove them, add a connected
attribute and set the value to false
.

{
type: 'sunburst',
title: {
text: "Value Boxes"
},
subtitle: {
text: "with placement set to 'in' and 'out' based on the node value",
'font-weight': "normal"
},
plot: {
'value-box': {
text: "%v",
'font-size':12,
'font-family': "Georgia",
'font-weight': "normal",
rules: [
{
rule: "%v > 6000",
placement: "in",
'offset-r': "50%",
'font-color': "white",
},
{
rule: "%v <= 6000",
placement: "out",
'font-color': "gray",
}
]
},
...omitted for brevity...
},
series: chartData
}
Summary
Got a question about how sunburst charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.