Sunburst Chart

• Overview
• Modules
• Quick Start
• General Settings
• Special Settings
  • Data
  • Calculation Mode
    • Ordinal from Root
    • Ordinal from Leaves
    • Parent Dependent
    • Parent Independent
  • Levels and Leaves
  • Appearance
    • All Points
    • Individual Points
    • Fill Functions
  • Start Angle
  • Sorting Order
  • Radius
  • Center Content
  • Labels and Tooltips
    • Tokens
    • Formatting Functions
    • Position
  • Interactivity
    • Selection Mode
    • Drilldown

Overview

A sunburst chart, otherwise known as a radial treemap or multi-level pie chart, is a visualization that displays hierarchically organized data as a set of nested rings (the top level of the hierarchy is shown in the center). Rings are divided into slices that represent data points, the sizes of slices sometimes representing their values.

This article explains how to create a basic Sunburst chart in AnyChart as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Sunburst chart's characteristics:

Modules

The Sunburst chart requires adding the Core and Sunburst modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-sunburst.min.js"></script>

Learn more: Modules.

Quick Start

To create a Sunburst chart, use the anychart.sunburst() chart constructor, like in the following sample:

// create data
var data = [
  {name: "Company A", children: [
    {name: "Technical", children: [
      {name: "Team Leaders"},
      {name: "Architects"},
      {name: "Developers"},
      {name: "Testers"}
    ]},
    {name: "Sales", children: [
      {name: "Analysts"},
      {name: "Executives"}
    ]},
    {name: "HR"},
    {name: "Management"}
  ]}
];

// create a chart and set the data
var chart = anychart.sunburst(data, "as-tree");

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Sunburst chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings

Data

The Sunburst chart requires the tree data model. Use the following fields:

• id to set unique identifiers
• parent to set parents
• children to set children
• name to set names
• value to set values

Note: It is possible to add custom fields to your data - see the Labels and Tooltips section of this article.

Unlike other chart types based on the tree data structure (e.g., the Treemap chart), this chart allows adding more than one root node:

// create data
var data = [
  {name: "London", children: [
    {name: "Management"},
    {name: "Sales", children: [
      {name: "Analysts"},
      {name: "Executives"}
    ]},
    {name: "Accounting"}
  ]},
  {name: "New York", children: [
    {name: "Technical", children: [
      {name: "Team Leaders"},
      {name: "Architects"},
      {name: "Developers"},
      {name: "Testers"}
    ]},
    {name: "HR"}
  ]}
];

// create a chart and set the data
var chart = anychart.sunburst(data, "as-tree");

Calculation Mode

When you create a Sunburst chart, you can specify how the size of its points should be calculated. To set the calculation mode, use the calculationMode() method with one of the parameters listed in anychart.anychart.enums.SunburstCalculationMode:

• "ordinal-from-root" (default)
• "ordinal-from-leaves"
• "parent-dependent"
• "parent-independent"

Please note that in the "ordinal-from-root" and "ordinal-from-leaves" modes, values do not affect the way the chart looks, so the value data field is not required. By contrast, to set the "parent-dependent" and "parent-independent" modes, you need to specify values.

To learn more about the difference between calculation modes, see the subsections below.

Ordinal from Root

The default calculation mode, "ordinal-from-root", is used to focus solely on the hierarchy of categories.

In this mode the values of elements are not taken into account, so the value data field is not required. Root nodes divide the circle into equal parts, and if there is only one root node, it occupies the whole circle. Child elements also divide their parents into equal parts.

// create data
var data = [
  {name: "Company A", children: [
    {name: "Technical", children: [
      {name: "Team Leaders"},
      {name: "Architects"},
      {name: "Developers"},
      {name: "Testers"}
    ]},
    {name: "Sales", children: [
      {name: "Analysts"},
      {name: "Executives"}
    ]},
    {name: "HR"},
    {name: "Management"}
  ]}
];

// create a chart and set the data
var chart = anychart.sunburst(data, "as-tree");

// set the calculation mode
chart.calculationMode("ordinal-from-root");

Ordinal from Leaves

The "ordinal-from-leaves" mode is used to compare categories by the number of their child elements.

In this mode the values of nodes are not taken into account, so the value data field is not required. The elements at the last level of the hierarchy (leaves), divide the circle into equal parts, and the size of each parent element depends on the number of its children.

// create data
var data = [
  {name: "Italian", children: [
    {name: "Consonants", children: [
      {name: "m"}, {name: "n"}, {name: "ɲ"},
      {name: "p"}, {name: "b"}, {name: "t"},
      {name: "d"}, {name: "k"}, {name: "g"},
      {name: "t͡s"}, {name: "d͡z"}, {name: "t͡ʃ"},
      {name: "d͡ʒ"}, {name: "f"}, {name: "v"},
      {name: "s"}, {name: "z"}, {name: "ʃ"},
      {name: "j"}, {name: "w"}, {name: "l"},
      {name: "ʎ"}, {name: "r"}, {name: "ɾ"}
    ]},
    {name: "Vowels", children: [
      {name: "i"}, {name: "u"}, {name: "e"},
      {name: "o"}, {name: "ɛ"}, {name: "ɔ"},
      {name: "a"}
    ]} 
  ]}
];

// create a chart and set the data
var chart = anychart.sunburst(data, "as-tree");

// set the calculation mode
chart.calculationMode("ordinal-from-leaves");

Parent Dependent

The "parent-dependent" calculation mode is used to compare elements by their values in case only some of the elements in each category are shown, while others are omitted (or when data is incomplete).

In this mode the sizes of nodes depend on their values, so the value data field is required. The value of a parent node can exceed the sum of its child nodes' values.

// create data
var data = [
  {name:     "Andorra", value: 57600000, children: [
    {name:   "Machines", value: 22400000, children: [
      {name: "Integrated Circuits", value: 12200000},
      {name: "Blank Audio Media", value: 2500000},
      {name: "Computers", value: 1100000}
    ]},
    {name:   "Instruments", value: 9750000, children: [
      {name: "Orthopedic Appliances", value: 8900000}
    ]},
    {name:   "Chemical Products", value: 4740000, children: [
      {name: "Essential Oils", value: 3690000},
      {name: "Beauty Products", value: 423000}
    ]},
    {name:   "Mineral Products", value: 4540000, children: [
      {name: "Coal Briquettes", value: 4280000}
    ]},
    {name:   "Transportation", value: 4060000, children: [
      {name: "Cars", value: 2870000},
      {name: "Vehicle Parts", value: 640000}
    ]}
  ]}
];

// create a chart and set the data
var chart = anychart.sunburst(data, "as-tree");

// set the calculation mode
chart.calculationMode("parent-dependent");

Parent Independent

The "parent-independent" calculation mode is used to compare elements by their values in case all elements belonging to each category are shown.

This mode requires the value data field: you need to specify the values of the elements at the last level of the hierarchy (leaves). The size of each leaf depends on its value, while the size of each parent depends on the sum of its child nodes' values, which is calculated automatically.

// create data
var data = [
  {name: "Company A", children: [
    {name: "Technical", children: [
      {name: "Team Leaders", value: 7},
      {name: "Architects", value: 3},
      {name: "Developers", value: 35},
      {name: "Testers", value: 15}
    ]},
    {name: "Sales", children: [
      {name: "Analysts", value: 12},
      {name: "Executives", value: 8}
    ]},
    {name: "HR", value: 3},
    {name: "Management", value: 7}
  ]}
];

// create a chart and set the data
var chart = anychart.sunburst(data, "as-tree");

// set the calculation mode
chart.calculationMode("parent-independent");

Levels and Leaves

You can access any level (ring) of a Sunburst chart by its index - use the level() method with an index as a parameter.

Note 1: The index of the root level is 0.

Note 2: If the index is not specified, this method affects all levels.

There is also an alternative way to access the elements of the last level (leaves): you can use the leaves() method.

Here are the available settings of levels and leaves: anychart.core.sunburst.Level. For example, you can enable/disable them or set their thickness by calling enabled() or thickness().To learn how to configure labels of levels and leaves, see the Labels and Tooltips section of this article.

In this sample, there is a Sunburst chart with the first level hidden and the thickness of leaves modified:

// hide the first level
chart.level(1).enabled(false);

// set the thickness of leaves
chart.leaves().thickness("70%");

Appearance

All Points

The appearance settings of a Sunburst chart can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods:

• fill() to set the fill
• hatchFill() to set the hatch fill
• stroke() to set the stroke

Also, you can use some other methods from anychart.core.StateSettings.

In this sample, there is a Sunburst chart with appearance settings configured:

// configure the visual settings of the chart
chart.hovered().fill("#96a6a6", 0.4);
chart.selected().fill("#96a6a6", 0.6);
chart.selected().hatchFill("forward-diagonal", "#96a6a6", 0.5, 12);
chart.normal().stroke("#96a6a6", 2);
chart.hovered().stroke("#96a6a6", 2);
chart.selected().stroke("#96a6a6", 4);

Individual Points

It is possible to configure the appearance of each point individually - use extra data fields corresponding to the methods mentioned above:

// create data
var data = [
  {name: "Company A", children: [
    {name: "Technical",
     normal: {fill: "#ffad99"},
     children: [
      {name: "Team Leaders"},
      {name: "Architects"},
      {name: "Developers",
       normal: {fill: "#dd2c00"},
       selected: {fill: "#b32400"}
      },
      {name: "Testers"}
    ]},
    {name: "Sales", children: [
      {name: "Analysts"},
      {name: "Executives"}
    ]},
    {name: "HR"},
    {name: "Management"}
  ]}
];

Fill Functions

Another way to set the colors of a chart is to call the fill() method with a function as a parameter. In this function, you can use the following fields:

• autoColor - the default color of a node or its color from the data, if specified
• chart - the chart, an instance of the anychart.charts.Sunburst class
• index - the index of a node in the tree
• isLeaf - a test whether a node is a leaf
• iterator - the tree iterator, an instance of the anychart.data.Iterator class
• level - the index of a level the current node belongs to
• mainColor - the color of a node's ancestor at the first level (if there is one root) or at the zero level (if there is more than one root)
• parent - the parent node of the current node, an instance of the anychart.data.Tree.DataItem class
• parentColor - the color of the parent node
• path - an array of nodes (instances of the anychart.data.Tree.DataItem class) representing the path from the root to the current node
• point - an instance of the TreeChartPoint class
• sourceColor - in the normal state: the color of a node from the data, the palette, or the inherited color; in the hovered and selected states: the color in the normal state

This is how the fill() method works in the normal state:

function() {
  return this.sourceColor;
}

The following sample demonstrates a simple fill function:

// configure the visual settings of the chart
chart.fill(function () {
  if (this.parent)
    return anychart.color.lighten(this.parentColor, 0.5);
  return this.mainColor;
});

Start Angle

You can set the angle where the first point is placed - use the startAngle() method. The angle is 0° by default.

In the sample below, the start angle of the first chart is not configured, and for the second chart it is set to 90°:

// set the start angle
chart.startAngle(90);

Sorting Order

By default, points are not sorted: they are shown as they appear in data. However, if you use calculation modes that take values into account ("parent-dependent" and "parent-independent"), you can sort points in ascending or descending order according to their values.

To set the sorting mode, call the sort() method with one of the parameters listed in anychart.enums.Sort:

• "none" (default)
• "asc"
• "desc"

  // set the sorting mode
  chart.sort("asc");
  

Radius

You can set the radius and inner radius (0 by default) of a Sunburst chart. Call radius() or innerRadius() and specify either a value or a percentage of the chart's bounds.

In the following sample, the radius of the chart is set to 30%, and the inner radius is set to 20:

// set the radius
chart.radius("30%");

// set the inner radius
chart.innerRadius(20);

Center Content

If the inner radius of a Sunburst chart if more than 0, there is a blank space in the center. You can place almost anything there: e.g., a text label, a chart, a map. See the Doughnut Chart article to learn about various types of center content.

The center content is set with the center() method, which provides the access to the anychart.core.ui.Center object.

To put some text in the center, create a label and assign it to the center:

// create and configure a label
var label = anychart.standalones.label();
label.text("Company Structure");
label.width("100%");
label.height("100%");
label.fontColor("#dd2c00");
label.fontSize(12);
label.fontWeight(600);
label.hAlign("center");
label.vAlign("middle");

// set the center content
chart.center().content(label);

Labels and Tooltips

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

A Tooltip is a text box displayed when a point on a chart is hovered over. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.

Tokens

To change the text of labels, combine the labels() and format() methods with tokens.

To configure tooltips, do the same with the tooltip() and format() methods.

Please note that you can configure the labels and tokens of levels and leaves. Use the methods mentioned above with level() and leaves().

Here is the list of tokens that work with the Sunburst chart:

• {%id}
• {%name}
• {%value}

Also, you can always add a custom field to your data and use a custom token corresponding to it.

This sample shows how to work with tokens:

// create data
var data = [
  {name:     "Andorra", value: 57600000, custom_field: "info 1", children: [
    {name:   "Machines", value: 22400000, custom_field: "info 2", children: [
      {name: "Integrated Circuits", value: 12200000, custom_field: "info 7"},
      {name: "Blank Audio Media", value: 2500000, custom_field: "info 8"},
      {name: "Computers", value: 1100000, custom_field: "info 9"}
    ]},
    {name:   "Instruments", value: 9750000, custom_field: "info 3", children: [
      {name: "Orthopedic Appliances", value: 8900000, custom_field: "info 10"}
    ]},
    {name:   "Chemical Products", value: 4740000, custom_field: "info 4", children: [
      {name: "Essential Oils", value: 3690000, custom_field: "info 11"},
      {name: "Beauty Products", value: 423000, custom_field: "info 12"}
    ]},
    {name:   "Mineral Products", value: 4540000, custom_field: "info 5", children: [
      {name: "Coal Briquettes", value: 4280000, custom_field: "info 13"}
    ]},
    {name:   "Transportation", value: 4060000, custom_field: "info 6", children: [
      {name: "Cars", value: 2870000, custom_field: "info 14"},
      {name: "Vehicle Parts", value: 640000, custom_field: "info 15"}
    ]}
  ]}
];

// create a chart and set the data
var chart = anychart.sunburst(data, "as-tree");

// set the calculation mode
chart.calculationMode("parent-dependent");

// enable HTML for labels
chart.labels().useHtml(true);

// configure labels
chart.labels().format("<span style='font-weight:bold'>{%name}</span><br>{%value}");

// configure labels of leaves
chart.leaves().labels().format("<span style='font-weight:bold'>{%name}</span>");

// configure tooltips
chart.tooltip().format("{%name}\n\nsales: {%value}\n{%custom_field}");

Formatting Functions

To configure labels and tooltips, you can use formatting functions and the following fields:

• name
• value

You can also add a custom field to your data and refer to it by using the getData() method.

The sample below demonstrates how to work with formatting functions:

// configure labels
chart.labels().format(function() {
  var sales = Math.round(this.value/100000)/10;
  return "<span style='font-weight:bold'>" + this.name + 
         "</span><br/>" + sales + " mln";
});

// configure labels of leaves
chart.leaves().labels().format(function() {
  var sales = Math.round(this.value/100000)/10;
  return sales + " mln";
});

// configure tooltips
chart.tooltip().format(function() {
  var sales = Math.round(this.value/100000)/10;
  return this.name + "\n\nsales: " + sales +
         " mln\n" + this.getData("custom_field");
})

Position

To set the position of labels, use labels() and position() with either "circular" or "radial" as a parameter.

The following sample shows how to change the position of labels, which is initially set to "circular":

// set the position of labels
chart.labels().position("circular");

The position of labels can also be set separately for levels and leaves - use the level() and leaves() methods.

The default position is "circular" for levels and "radial" for leaves, and this sample demonstrates how to reverse it:

// set the position of labels
chart.level().labels().position("radial");
chart.leaves().labels().position("circular");

Interactivity

Selection Mode

By default, if you click on a leaf of a Sunburst chart, the leaf is selected, and if you click on a node that has children, a drilldown is performed (see the drilldown subsection to learn more).

You can set another selection mode or disable selection - this setting is configured by calling the interactivity() and selectionMode() methods with one of the parameters listed in anychart.enums.SelectionMode:

• "drill-down" (default)
• "multi-select"
• "single-select"
• "none"

Note: The "multi-select" mode allows selecting multiple elements by holding down the Shift key while clicking on them.

The sample below shows how to change the selection mode, which is initially set to "none":

// set the selection mode
chart.interactivity().selectionMode("none");

Drilldown

The Sunburst chart comes with a built-in drilldown feature: if you click on an element that has children, you drill down to it and its children, and if you click on the parent element or press Esc / Backspace, you drill up a level. This behavior can be modified - use the following methods:

• drillTo() to drill to an item
• drillUp() to drill up
• getDrilldownPath() to get the drilldown path

Note: By default it is also possible to drill down or up from the context menu: right-click on an element and select "Drill Down To" or "Drill Up" in the menu - if, of course, these options are available for the element.

Sometimes you might also need to perform a search in the data with the search() method of the anychart.data.Tree class (see the Tree Data Model article to learn more about operating tree-like data). For example, if you want to drill down to a particular item in the data tree, call search() to get the item and drillTo() to drill down to it. For drilling up, call drillUp():

/* locate an item in the data tree
and get it as an object */
var item = treeData.search("name", "Technical");

// drill down to the item
chart.drillTo(item);

// drill up a level
chart.drillUp();

The following sample shows how to drill down to a particular item, drill up, and add the drilldown path to the title of the chart by using a custom function: