Facebook Pixel

AnyChart Extension for Qlik: Sunburst Chart

Interactive Sunburst to create Multi-level Pie Charts and Radial Treemaps

Basics

Downloading and Installing

Qlik Sense Desktop

To install AnyChart Sunburst Extension in Qlik Sense Desktop, do the following:

  1. Download AnyChart Sunburst Extension for Qlik Sense.
  2. Extract the archive.
  3. Open a Windows Explorer window and navigate to the Qlik Sense Extensions directory:
    ..\Users\<UserName>\Documents\Qlik\Sense\Extensions.
  4. Copy the anygantt-4x-sunburst folder to the Extensions directory.
  5. Relaunch Qlik Sense Desktop.
Qlik Sense Server

To install AnyChart Sunburst Extension on a Qlik Sense server,

  1. Download AnyChart Sunburst Extension for Qlik Sense.
  2. Open Qlik Management Console (QMC): https://<QPS server name>/qmc
  3. Select Extensions on the QMC start page or from the Start drop-down menu.
  4. Click Import in the action bar.
  5. In the dialog, select the downloaded archive. Leave the password area blank.
  6. Click Open in the file explorer window.
  7. Click Import.
Qlik Sense Cloud

To install AnyChart Sunburst Extension in Qlik Sense Cloud, do the following:

  1. Download AnyChart Sunburst Extension for Qlik Sense Cloud.
  2. Access the Management Console:
    • add /console to your tenant address: https://<your tenant address>/console
    • or use the navigation link Administration under the user profile in the hub
  3. Go to the Extensions page and click Add.
  4. In the dialog, select the downloaded archive.
  5. Click Add.
  6. In the Management Console, go to the Content Security Policy section and click Add.
  7. In the dialog, give the Content Security Policy a name – for example, AnyChart.
  8. Type the address of the origin server: qlik.anychart.com
  9. Select the following directives:
    • connect-src
    • font-src
    • img-src
    • script-src
    • style-src
  10. Click Add.

Overview

The Sunburst chart, otherwise known as a radial treemap or multilevel pie chart, is a visualization that displays hierarchically organized data as a set of nested rings divided into slices. The sizes of slices represent their values.

Read Quick Start and Dimensions and Measures to learn how to add a Sunburst chart and what dimensions and measures to use.

You can configure the appearance of the chart: set the colors and inner radius, add center content ,and adjust the labels and tooltips.

Also, the following options are available: interactivity, calculation conditions.

An AnyChart sunburst chart with three levels of the hierarchy and the center content enabled

Quick Start

This quick tutorial explains how to create a basic Sunburst chart.

First of all, add an empty chart to your sheet:

  1. Go to Custom objects > AnyChart in the assets panel.
  2. Drag an empty AnyChart Sunburst chart to the sheet.

Then add two dimensions:

  1. Go to Dimensions in the properties panel.
  2. Click Add dimension and select a dimension.
  3. Click Add dimension and select a dimension.

Finally, add a measure, which is used to calculate the sizes of slices:

  1. Go to Measures in the properties panel.
  2. Click Add measure and select a measure.

Please note that you can also create dimensions and measures from fields or add them by clicking on buttons on the empty chart.

A basic sunburst chart built with AnyChart Sunburst for Qlik Sense Extension

Dimensions and Measures

Dimensions

To add a dimension, do the following:

  1. Go to Dimensions in the properties panel.
  2. Click Add dimension and select a dimension.

The Sunburst chart requires only one dimension. However, with one dimension it looks like an ordinary (one-level) pie chart. To create a multilevel chart, add two or more dimensions.

Please keep in mind that you need to arrange dimensions in the correct order, from higher levels to lower ones: just drag them in the properties panel.

AnyChart Sunburst can display hierarchical data with one root or several roots:

A sunburst chart displaying hierarchical data with one root

A sunburst chart displaying hierarchical data with several roots

Each slice of the chart has a text label, which displays its dimension and measure. But labels can display a different text if needed. For example, you can use numeric identifiers of categories as a dimension and at the same time display names of categories as labels. See the Labels section to learn more.

Measures

To add a measure, do the following:

  1. Go to Measures in the properties panel.
  2. Click Add measure and select a measure.

The measure is used to calculate the sizes of slices. In your visualizations, you can use any measures with any aggregations as well as set measures as custom expressions. For example, you can use a custom expression to hide slices that are too small.

Appearance

Color by Expression

The slices of the chart are colored by the default palette. Alternatively, you can color them by expression.

Coloring by expression sets colors using a user-defined expression. When coloring by expression, you can define both what colors to use and which values to use them with, enabling more control over how colors are used in the visualization. For example, you might highlight values of particular interest, or differentiate between values within different value ranges. Coloring by expression can also be used to color a visualization by values not included within a visualization.

To color slices by expression, do the following:

  1. Go to Appearance > Colors in the properties panel.
  2. Switch the Colors slider.
  3. Select By expression from the first drop-down menu.
  4. Enter an expression in the input box.
Examples

Example: Coloring by parent

Pick(Match(RegionName, 
'South', 'West', 'Midwest', 'Northeast'), 
'#d29b9b', '#57a7b1', '#5785b2', '#bdbdbd')

In this example, 4 colors distinguish slices belonging to 4 different parent groups.

A sunburst chart with the slices colored by expression (by parent group)

Example: Coloring by hierarchy level

If(Dimensionality() = 1, '#d29b9b', 
If(Dimensionality() = 2, '#57a7b1',
If(Dimensionality() = 3, '#bdbdbd')))

In this example, 3 colors distinguish slices belonging to 3 different hierarchy levels.

A sunburst chart with the slices colored by expression (by hierarchy level)

Example: Coloring by measure

If(Sum(CENSUS2010POP) >= 30000000, '#d29b9b', 
If(Sum(CENSUS2010POP) >= 10000000, '#57a7b1',
'#bdbdbd'))

Here 3 colors indicate 3 population sizes: >= 30M, >= 10M and < 30M, and the rest ( < 10M).

A sunburst chart with the slices colored by expression (by measure)

Example: Coloring by alternative measure

If(Avg(RNATURALINC2011) <= 0, '#d29b9b',
If(Avg(RNATURALINC2011) < Avg(TOTAL{1<Country = {'U.S.'}>}RNATURALINC2011), '#bdbdbd',
If(Avg(RNATURALINC2011) >= Avg(TOTAL{1<Country = {'U.S.'}>}RNATURALINC2011), '#57a7b1')))

Here 3 colors indicate 3 types of the rate of natural increase: <= 0 (red), > 0 but below the total average (gray), and above or equal to the total average (green). The sizes of slices represent another measure – the population size.

A sunburst chart with the slices colored by expression (by an alternative measure not included within the visualization)

Inner Radius

You can adjust the inner radius of the chart to set the size of the open space in the center.

By default, the inner radius is 0%: the center is occupied by the parent element(s), and no extra space is left:

A sunburst chart with the inner radius set to 0

To set the inner radius, do the following:

  1. Go to Appearance > Presentation in the properties panel.
  2. Use the Inner radius option.

A sunburst chart with the inner radius set to a positive value

You can use the space in the center to display center content.

Center Content

When the inner radius is more than 0, there is an open space in the center of the chart. You can use it to display additional information:

  • Go to Appearance > Presentation in the properties panel.
  • Enter an expression in the Center content input box.

Please note that it is possible to set the center content either as a string value or as an arbitrary string expression. Also, you can use HTML, like in the sample below:

'<b>POPULATION<br><span style=color:red><i>' &
Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M</i></span></b>

A sunburst chart with the center content enabled and formatted with the help of HTML

Labels

Labels are text objects displaying the information about the slices of the chart.

By default, each label displays the dimension and measure of a slice, but you can customize the text:

  1. Go to Appearance > Label in the properties panel.
  2. Select a label format from the Text drop-down menu.
  3. If you select the Expression format, enter an expression in the input box.

The following label formats are available:

Label Format Description
Dimension Each label displays the dimension corresponding to the slice.
Dimension and measure Each label displays the dimension and measure corresponding to the slice.
Measure only outside The labels of the outside ring, representing the last (lowest) level of the hierarchy, display dimensions and measures. The labels of all the inside rings display only dimensions.
Measure only inside The labels of all the inside rings display dimensions and measures. The labels of the outside ring, representing the last (lowest) level of the hierarchy, display only dimensions.
Expression Labels display a custom (user-defined) text.

Dimension

A sunburst chart with the labels displaying dimensions

Dimension and Measure

A sunburst chart with the labels displaying dimensions and measures

Measure only Outside

A sunburst chart with the labels displaying dimensions and measures in the outside ring and dimensions in all the inside rings

Measure only Inside

A sunburst chart with the labels displaying dimensions in the outside ring and dimensions and measures in all the inside rings

Please note that if you select the Expression option, it is possible to set the label text either as a string value or as an arbitrary string expression. Using expressions allows you to highlight values of particular interest, display values not included within a visualization or results of calculations, and so on.

In the example below, slices at different levels of the hierarchy display different labels:

If(Dimensionality() = 1, Country & ' POPULATION',

If(Dimensionality() = 2,
Upper(RegionName) & ': ' & Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M',

If(Dimensionality() = 3, StateCodes)))

A sunburst chart with the labels displaying different texts at different hierarchy levels

Tooltips

Tooltips are text boxes that appear when the user hovers over the slices of the chart. You can set a custom tooltip text.

Please note that it is possible to set the tooltip text either as a string value or as an arbitrary string expression. Using expressions allows you to highlight values of particular interest, display values not included within a visualization or results of calculations, and so on.

Also, you can use HTML in tooltips.

To disable or enable tooltips, go to Interactivity in the properties panel and switch the Tooltips slider.

To configure the tooltip text,

  1. Go to Appearance > Tooltip in the properties panel.
  2. Switch the Tooltip text slider.
  3. Enter a string value or a string expression in the input box.

Tooltips of different slices can display different texts. For example, the text can vary depending on the hierarchy level:

If(Dimensionality() = 1,
'<b>' & Upper(RegionName) & '</b><br><i>Region</i>' &
'<hr>States: ' & Count(State) & '<br>',

If(Dimensionality() = 2,
'<b>' & Upper(DivisionName) & '</b><br><i>Division</i>' &
'<hr>States: ' & Count(State) & '<br>',

If(Dimensionality() = 3,
'<b>' & Upper(State) & '</b><br><i>State</i><hr>'))) &

'Population: ' & Round(Sum(CENSUS2010POP) / 1000000, 0.1) & 'M'

A sunburst chart with a tooltip displaying a custom text for a slice at the first hierarchy level

A sunburst chart with a tooltip displaying a custom text for a slice at the second hierarchy level

A sunburst chart with a tooltip displaying a custom text for a slice at the last hierarchy level

Other Features

Interactivity

By default, the following interactivity features are available: selection, snapshots, and tooltips. Also, you can set the selection mode or enable drilldown instead of selection.

To disable or enable these features, go to Interactivity in the properties panel and use the following features:

  • Selection and Dimension
  • Enable drilldown
  • Snapshots
  • Tooltips

When Selection is enabled, you can set the selection mode by using the Dimension drop-down menu. The following options are available:

Selection Mode Description
Show all The chart shows the selected dimension with its parents and children at all the levels above and below.
Show selected and below The chart shows the selected dimension with its children at all the levels below.

Two sunburst charts with different selection modes enabled, a dimension at the second level of the hierarchy selected

Two sunburst charts with different selection modes enabled, a dimension at the third level of the hierarchy selected

The Enable drilldown option is available only when Selection is disabled. Here is how it works: if you click an element that has children, you drill down to it and its children, and if you click on the parent element, you drill up a level.

A sunburst chart with drilldown enabled

Calculation Conditions

AnyChart supports calculation conditions: you can set a condition that needs to be fulfilled (true) for the object to be displayed. If the condition is not fulfilled, a custom message is displayed.

A calculation condition is useful when a chart or table is very big and makes the visualization slow to respond. A calculation condition can then help so that for example an object does not show until the user has filtered the data to a more manageable level by applying selections.

To add a condition, do the following:

  1. Go to Add-ons > Data handling in the properties panel.
  2. Enter an expression in the Calculation condition input box.
  3. Enter a string value or a string expression in the Displayed message input box.

For example, the following expression allows showing the chart only when the user selects less than 20 states:

If(Count(State) < 20, 1, 0)

If there are too many states, AnyChart displays this message:

'There are too many states (' & Count(State) & ').'

A sunburst chart with a calculation condition

弊社営業担当者へのお問い合わせ

弊社営業担当者が弊社製品、ライセンス、購買、その他すべてに関するご相談・ご質問に喜んでお答えします。