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
// 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();
}
Events
Events to handle user interaction and state changes.
// 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.
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.
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.
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.
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
}