As we continue leading the way on the latest data visualization trends, we're happy to announce the addition of a .NET Sunburst chart, a modern chart that lets you visualize hierarchical data beyond the classical bars and circles. Sunburst is the newest chart available with our FlexChart chart control.

About Sunburst Charts

One of the latest charts in the industry, Sunburst is a natural evolution of Pie that produces beautiful visualization and provides deeper analysis capabilities. It's as easy to use as a pie chart, and Sunburst charts are a great way to visualize hierarchical data using a radial layout (as opposed to the TreeMap). Sunburst chart in FlexChart is an extension of the already available FlexPie control, with each level of the hierarchy represented by a ring. The innermost ring depicts the beginning of the hierarchy and deeper levels are layered around it; individual rings are sliced and divided based on their hierarchical relationship to the parent slice as shown in the figure below. Sunburst chart Sunburst chart In this blog we'll look at:

Why Sunburst?

Before we begin, let’s take a small data set for our data visualization example.

Year

Quarter

Month

Sales

2014

Q1

120

2014

Q2

250

2014

Q3

160

2014

Q4

190

2015

Q1

Jan

45

2015

Q1

Feb

50

2015

Q1

March

55

2015

Q2

175

2015

Q3

170

2015

Q4

Oct

70

2015

Q4

Nov

65

2015

Q4

Dec

40

You'll notice that there's a hierarchical pattern in the data. Traditional charts such as Column, Bar or Pie are not an ideal candidate to plot such data because of their inability to visualize the multi-level hierarchy in a single chart. Yes, you can add some drilldown mechanism or use multiple charts, but what if the hierarchy goes deeper? There will be a limitation to these workarounds. Designed specifically to cater scenarios like these, Sunburst chart is an ideal solution to visualize this multi-level hierarchical data. The main purpose is to help the end user visualize how an outer layer (child member) contributes to an inner layer (parent).

Getting Started with our .NET Sunburst chart

To get started with the Sunburst chart:

  • Place the Sunburst control on the designer surface
  • Specify the chart’s data source

    sunburst.DataSource = ds.SalesCollection;
    
  • Set the chart’s Binding to the property name that contains the values to be plotted

    sunburst.Binding = “Sales”; 
    
  • Set the chart’s BindingName to the property name that contains the name of data items. This should be a comma-separated string.

    sunburst.BindingName = “Year,Quarter,Month”;
    

The sequence in the comma-separated string above is very important as it determines the sequence for the sunburst layers. In the above case “Year” would be the innermost layer, followed by “Quarter” and then “Month”.

  • Next, set the chart’s ChildItemsPath to the property (or properties) name used to generate child items in hierarchical data.
    sunburst. ChildItemsPath = “Items”; 
    

That’s all you’ll need to do. The last step is not required if the data you are using is flat in nature. We’ll get into the differences between using flat and hierarchically structured data with Sunburst chart in our next blog.

Customizing Sunburst chart

Since it's inherited from FlexPie, Sunburst chart offers the same level of customization. You can use properties like InnerRadius, Offset, StartAngle, and Palette to customize the layout and appearance of Sunburst chart. Here's how those properties look in code:

sunburst.InnerRadius = 0.3;  
sunburst.Offset = 0.02;  
sunburst.StartAngle = 180;  
sunburst.Palette = Palette.Modern;  

Customized sunburst chart Customized sunburst chart In this blog we covered the basics of Sunburst chart: what's the usage, how to get started and customization. In the subsequent blogs, we will walk you through how you can take maximum advantage of current as well as upcoming functionalities of Sunburst chart. Download the Sunburst101 Sample: Win | WPF | UWP Read more about Sunburst: Win | WPF | UWP