Blazor Sunburst Chart for Visualizing Hierarchical Data

Install-Package Syncfusion.Blazor.Charts

builder.Services.AddSyncfusionBlazor();

<script src="_content/Syncfusion.Blazor.Charts/scripts/sf-sunburst-chart.min.js" type="text/javascript"></script>

@using Syncfusion.Blazor.Charts

<div style="width: 100%; height: 600px;">
    <SfSunburstChart TItem="SunburstData"
                     DataSource="@DataSource"
                     IdMemberPath="@nameof(SunburstData.Id)"
                     ParentIdMemberPath="@nameof(SunburstData.ParentId)"
                     LabelMemberPath="@nameof(SunburstData.Name)"
                     ValueMemberPath="@nameof(SunburstData.Value)"
                     Title="Sales by Region">
        <SunburstDataLabelSettings Visible="true" LabelOverflowMode="LabelOverflowMode.Trim"></SunburstDataLabelSettings>
        <SunburstLegendSettings Visible="true"></SunburstLegendSettings>
        <SunburstTooltipSettings Enable="true" Format="${point.label}: ${point.value}"></SunburstTooltipSettings>
    </SfSunburstChart>
</div>

@code {
    public class SunburstData
    {
        public string Id { get; set; } = string.Empty;
        public string ParentId { get; set; } = string.Empty;
        public string Name { get; set; } = string.Empty;
        public double Value { get; set; }
    }

    public List<SunburstData> DataSource { get; set; } = new()
    {
        new() { Id = "america", ParentId = string.Empty, Name = "North America" },
        new() { Id = "usa", ParentId = "america", Name = "USA", Value = 200 },
        new() { Id = "canada", ParentId = "america", Name = "Canada", Value = 30  },
        new() { Id = "europe", ParentId = string.Empty, Name = "Europe" },
        new() { Id = "germany", ParentId = "europe", Name = "Germany", Value = 94  },
        new() { Id = "uk", ParentId = "europe", Name = "UK", Value = 66  },
        new() { Id = "asia", ParentId = string.Empty, Name = "Asia" },
        new() { Id = "india", ParentId = "asia", Name = "India", Value = 170 },
        new() { Id = "japan", ParentId = "asia", Name = "Japan", Value = 42  }
    };
}