Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Sunburst Chart

Siticone Sunburst Chart

The SiticoneSunburstChart is a powerful, hierarchical visualization component ideal for displaying multi-level data structures. It features interactive drill-down capabilities, smooth animations, and a rich theming engine to visualize proportions within categories and subcategories effectively.

Data Binding Properties

Essential properties to map your data source to the chart's hierarchical structure. The chart supports flat data sources (DataTables, Lists) connected via ID and ParentID relationships.

Property Type Description & Usage Example
DataSource object chart.DataSource = myDataTable; The data container holding the records. Supports DataTable, List<T>, or any IEnumerable.
IDMember string chart.IDMember = "CategoryID"; The name of the property or column that uniquely identifies each node.
ParentIDMember string chart.ParentIDMember = "ParentID"; The name of the property or column identifying the parent node. Root nodes should have a null or DBNull value here.
LabelMember string chart.LabelMember = "CategoryName"; The property name to use for the text displayed on the chart segments.
ValueMember string chart.ValueMember = "SalesAmount"; The numeric value determining the size of the segment. Parent node values are automatically calculated as the sum of their children.

Appearance & Styling

Customize the visual presentation, including color palettes, geometry, and fonts.

Property Type Description & Usage Example
Theme SunburstThemePreset chart.Theme = SunburstThemePreset.Vibrant; Applies a pre-defined color palette. Options include Ocean, Forest, Sunset, Graphite, and many more.
ColorPalette List<Color> chart.ColorPalette = new List<Color> { Color.Red, Color.Blue }; Allows defining a custom list of colors. Setting this property automatically sets Theme to Custom.
CenterHoleRatio float chart.CenterHoleRatio = 0.4f; Controls the size of the inner empty circle relative to the chart radius. Values typically range between 0.1 and 0.8.
NodeBorderColor Color chart.NodeBorderColor = Color.White; The color of the lines separating the segments.
LabelFont Font chart.LabelFont = new Font("Segoe UI", 9f);
LabelForeColor Color chart.LabelForeColor = Color.Black; The color of the text drawn on the segments. Set to Color.Transparent to automatically choose Black or White based on background brightness.
ShowLabels bool chart.ShowLabels = true; Toggles the visibility of text labels on the chart segments.

Behavior & Interaction

Control how the user interacts with the chart, including animations, tooltips, and drilling down into data.

Property Type Description & Usage Example
EnableDrilldown bool chart.EnableDrilldown = true; If enabled, clicking a segment makes it the new root (center) of the chart. Clicking the center hole drills back up.
EnableAnimations bool chart.EnableAnimations = true; Toggles the opening animation when data is loaded.
EnableHighlight bool chart.EnableHighlight = true; When true, hovering over a segment lightens its color to indicate focus.
EnableTooltips bool chart.EnableTooltips = true; Displays a floating box with the segment label and value when hovering.

Public Methods

DataBind()
// Commits the DataSource and processes the hierarchy.
// Call this method after setting DataSource, IDMember, ParentIDMember, etc.
public void LoadChart()
{
    siticoneSunburstChart1.DataSource = myDataTable;
    siticoneSunburstChart1.IDMember = "Id";
    siticoneSunburstChart1.ParentIDMember = "ParentId";
    siticoneSunburstChart1.LabelMember = "Name";
    siticoneSunburstChart1.ValueMember = "Amount";
    
                // Triggers the calculation and rendering
    siticoneSunburstChart1.DataBind();
}
Must be called manually after changing data properties to refresh the chart.

Events

Events to handle user interaction and state changes.

Event Descriptions & Wiring
// 1. NodeClick Event
// Fires when a specific segment is clicked.
// Provides access to the underlying data item and node level.
chart.NodeClick += (s, e) => 
{
                Console.WriteLine($"Clicked: {e.Label}, Value: {e.Value}");
    
                // Access original data object
                var row = e.DataItem as DataRowView;
};

// 2. NodeHover Event
// Fires continuously as the mouse moves over different segments.
chart.NodeHover += (s, e) => 
{
    lblStatus.Text = $"Hovering: {e.Label}";
};

// 3. NodeDrilledDown Event
// Fires when the user drills down (clicks a child) or drills up (clicks center).
// Useful for updating breadcrumbs or external titles.
chart.NodeDrilledDown += (s, e) => 
{
                Debug.WriteLine($"Current Root Context: {e.Label}");
};

// 4. ThemeChanged Event
// Fires when the Theme property is updated.
chart.ThemeChanged += (s, e) => 
{
                Debug.WriteLine($"New Theme Applied: {e.NewTheme}");
};

// 5. DataLoaded Event
// Fires after DataBind() completes and the hierarchy is built.
// Provides NodeCount and MaxDepth stats.
chart.DataLoaded += (s, e) => 
{
                MessageBox.Show($"Chart loaded with {e.NodeCount} nodes. Depth: {e.MaxDepth}");
};

Detailed Usage Examples

Example 1: Basic Binding with DataTable

This example demonstrates how to bind a standard DataTable containing hierarchical sales data to the chart.

C# - DataTable Binding
private void LoadSalesData()
{
                // 1. Create Data Structure
                DataTable dt = new DataTable();
    dt.Columns.Add("ID", typeof(int));
    dt.Columns.Add("ParentID", typeof(int));
    dt.Columns.Add("Category", typeof(string));
    dt.Columns.Add("Sales", typeof(double));

                // 2. Populate Hierarchical Data
                // Root Categories (ParentID is null)
    dt.Rows.Add(1, DBNull.Value, "Electronics", 0);
    dt.Rows.Add(2, DBNull.Value, "Furniture", 0);

                // Sub-Categories (Linked to Parent IDs)
    dt.Rows.Add(3, 1, "Laptops", 5000);
    dt.Rows.Add(4, 1, "Smartphones", 8000);
    dt.Rows.Add(5, 2, "Chairs", 1500);
    dt.Rows.Add(6, 2, "Tables", 2000);

                // 3. Configure Chart Properties
    siticoneSunburstChart1.DataSource = dt;
    siticoneSunburstChart1.IDMember = "ID";
    siticoneSunburstChart1.ParentIDMember = "ParentID";
    siticoneSunburstChart1.LabelMember = "Category";
    siticoneSunburstChart1.ValueMember = "Sales";

                // 4. Apply Visual Styling
    siticoneSunburstChart1.Theme = SunburstThemePreset.Oceanic;
    siticoneSunburstChart1.CenterHoleRatio = 0.3f;
    siticoneSunburstChart1.ShowLabels = true;

                // 5. Bind Data
    siticoneSunburstChart1.DataBind();
}

Example 2: Binding to Object List (POCO)

You can also bind to a generic List<T> of custom objects. The logic remains the same: map the properties using the Member strings.

C# - Object List Binding
public class FileNode
{
                public int FileId { get; set; }
                public int? FolderId { get; set; }
                public string Name { get; set; }
                public double SizeKB { get; set; }
}

private void BindFileSystem()
{
                var files = new List<FileNode>
    {
                new FileNode { FileId = 1, FolderId = null, Name = "C: Drive", SizeKB = 0 },
                new FileNode { FileId = 2, FolderId = 1, Name = "Program Files", SizeKB = 0 },
                new FileNode { FileId = 3, FolderId = 1, Name = "Users", SizeKB = 0 },
                new FileNode { FileId = 4, FolderId = 2, Name = "App1", SizeKB = 450 },
                new FileNode { FileId = 5, FolderId = 2, Name = "App2", SizeKB = 900 },
                new FileNode { FileId = 6, FolderId = 3, Name = "Documents", SizeKB = 120 }
    };

    siticoneSunburstChart1.DataSource = files;
    siticoneSunburstChart1.IDMember = "FileId";
    siticoneSunburstChart1.ParentIDMember = "FolderId";
    siticoneSunburstChart1.LabelMember = "Name";
    siticoneSunburstChart1.ValueMember = "SizeKB";
    
                // Enable Drilldown to navigate folders
    siticoneSunburstChart1.EnableDrilldown = true;
    siticoneSunburstChart1.Theme = SunburstThemePreset.Graphite;
    
    siticoneSunburstChart1.DataBind();
}

Example 3: Custom Interaction & Themes

This example demonstrates how to set a custom color palette and handle interaction events to display detailed information in a separate label.

C# - Interaction & Custom Style
private void SetupInteractiveChart()
{
                // 1. Define a Custom Palette
    siticoneSunburstChart1.ColorPalette = new List<Color> 
    { 
                Color.FromArgb(52, 152, 219),  // Blue
                Color.FromArgb(46, 204, 113),  // Green
                Color.FromArgb(155, 89, 182),  // Purple
                Color.FromArgb(241, 196, 15)   // Yellow
    };
    
                // 2. Style Tweaks
    siticoneSunburstChart1.LabelForeColor = Color.White;
    siticoneSunburstChart1.NodeBorderColor = Color.FromArgb(40, 40, 40);
    siticoneSunburstChart1.CenterHoleRatio = 0.4f;

                // 3. Wire Up Events
    siticoneSunburstChart1.NodeHover += Chart_NodeHover;
    siticoneSunburstChart1.NodeDrilledDown += Chart_Drill;
}

private void Chart_NodeHover(object sender, SunburstNodeEventArgs e)
{
                // Display details in a label next to the chart
    lblInfo.Text = $"Segment: {e.Label}\nValue: {e.Value:N0}\nLevel: {e.Level}";
}

private void Chart_Drill(object sender, SunburstNodeEventArgs e)
{
                // Update breadcrumb when user clicks to drill down
    lblBreadcrumb.Text = $"Current View: {e.Label}";
}

Enumerations

Key enumerations used to configure the chart.

SunburstThemePreset Enum
public enum SunburstThemePreset
{
    Custom,     // Uses the ColorPalette property
    Vibrant,    // Bright, high-contrast colors
    Ocean,      // Blues and Cyans
    Forest,     // Greens and Earth tones
    Sunset,     // Reds, Oranges, Yellows
    Graphite,   // Grayscale
    Pastel,     // Soft, desaturated colors
    Sunrise,    // Warm gradients
    Oceanic,    // Deep sea colors
    Desert,     // Browns and Sands
    Winter,     // Cold blues and whites
    Autumn,     // Fall colors
    Spring,     // Fresh greens
    Summer,     // Hot warm colors
    Volcanic,   // Dark reds and oranges
    Glacial,    // Icy whites and blues
    Royal,      // Purples and Golds
    Neon,       // Bright neon colors
    Metallic,   // Silvers and grays
    Earthy,     // Natural browns
    Sky,        // Light airy blues
    Ruby,       // Gemstone reds
    Emerald     // Gemstone greens
}