Blazor | ComponentOne
Controls / FlexChart / Chart Types / Specialized Chart / Sunburst Chart
In This Topic
    Sunburst Chart
    In This Topic

    Sunburst Chart, also known as a multi-level pie chart, is ideal for visualizing multi-level hierarchical data depicted by concentric circles. The circle in the center represents the root node surrounded by the rings representing different levels of hierarchy. Rings are divided based on their relationship with the parent slice with each of them either divided equally or proportional to a value. For instance, you can use sunburst to display sales over past few years or to display makes or models of a product as shown in the below image.

    Sunburst Chart

    Blazor Chart provides sunburst chart through a stand alone Sunburst control which is represented by the Sunburst class. The control appears as a pie chart when dropped on the form until it is provided with a hierarchical data using the ItemsSource property. This class also provides Binding and BindingName properties for setting numeric values and labels of the sunburst slices.

    To create a sunburst chart through code, set up the data source through the ItemsSource property and configure the chart by setting the Binding and BindingName property. Also, set the ChildItemPath property to generate child items in hierarchical data.

    Razor
    Copy Code 
    @using Localization
@using C1.Chart;
@using C1.Blazor.Chart;
@using C1.Blazor.Input;

<Sunburst Class="chart" Palette="palette ?? Palette.Standard" InnerRadius="innerRadius ?? 0" 
          HeaderContent="OS Share - 2020 August" HeaderStyle="font-size:24px"
          LegendPosition="Position.Right" Tooltip="{name}: {value:n1}%"
          BindingName="Name" Binding="Value" ChildItemsPath="Items" ItemsSource="@DataSource.GetData()"
          FooterContent="Data source: https://gs.statcounter.com/" FooterStyle="font-size:12px"
          >
    <Label>
        <PieDataLabel Position="PieLabelPosition.Center" Content="{name}" Overlapping="PieLabelOverlapping.Hide" />
    </Label>
</Sunburst>


@code {
    IEnumerable<Palette> palettes = Enum.GetValues(typeof(Palette)).Cast<Palette>().Where((p, x) => p != Palette.Custom);
    Palette? palette = Palette.Standard;

    double[] innerRadiuses = new double[] { 0, 0.25, 0.5, 0.75 };
    double? innerRadius = 0;

    double[] offsets = new double[] { 0, 0.25, 0.5, 0.75 };
    //double? offset = 0;

    public class DataSource
    {
        public class ItemData
        {
            public string Name { get; set; }
            public double Value { get; set; }

            public List<ItemData> Items { get; private set; }

            public ItemData()
            {
                Items = new List<ItemData>();
            }
        }

        public static List<ItemData> GetData()
        {
            var data = new List<ItemData>()
            {
                new ItemData{Name="Desktop", Items = {
                        new ItemData{ Name="Windows", Value = 35.43 },
                        new ItemData{ Name="OS X", Value = 7.78 },
                        new ItemData{ Name="Linux", Value = 0.85 },
                        new ItemData{ Name="ChromeOS", Value = 0.41 },

                    }},
                new ItemData{Name="Mobile", Items = {
                        new ItemData{ Name="Android", Value = 39.23 },
                        new ItemData{ Name="IOS", Value = 14.53 },
                    }},
                new ItemData{ Name="Others", Value = 2.0}
            };
            return data;
        }
    }
}