Siticone Doughnut Chart

The SiticoneDoughnutChart is an elegant and interactive data visualization control. Similar to a pie chart but with a hollow center, it allows for displaying additional context (like total values) in the middle. It features smooth radial animations, slice highlighting, and extensive theming.

Data Binding

Properties for connecting your data source to the chart.

Property	Type	Description & Usage Example
`DataSource`	object	chart.DataSource = myDataTable; The source of the data. Accepts `DataTable`, `List<T>`, or `IEnumerable`.
`LabelMember`	string	chart.LabelMember = "CategoryName"; The name of the property or column containing the labels for each slice.
`ValueMember`	string	chart.ValueMember = "Amount"; The name of the property or column containing the numeric values that determine slice size.

Appearance & Theming

Customize the visual style of the chart, including colors, hole size, and center text.

Property	Type	Description & Usage Example
`Theme`	DoughnutChartTheme	chart.Theme = SiticoneDoughnutChart.Themes.Find(t => t.Name == "Ocean"); Applies a predefined color palette. Options include "Ocean", "Sunset", "Forest", "Dark", etc.
`HoleRadiusPercentage`	float	chart.HoleRadiusPercentage = 0.6f; Controls the size of the inner hole relative to the total radius (0.1 to 0.9).
`CenterText`	string	chart.CenterText = "Total Sales"; The main text displayed in the center of the doughnut.
`CenterSubText`	string	chart.CenterSubText = "$50,000"; Smaller secondary text displayed below the main center text. Often used for values.
`ShowPercentageOnSlice`	bool	chart.ShowPercentageOnSlice = true; If true, displays the percentage value directly on top of each slice.

Behavior & Interaction

Control animations and user interaction effects.

Property	Type	Description & Usage Example
`EnableAnimations`	bool	chart.EnableAnimations = true; Toggles the radial "sweep" animation when the chart loads.
`EnableHighlight`	bool	chart.EnableHighlight = true; If enabled, slices will "explode" outward slightly when hovered over.
`ExplodeOffset`	float	chart.ExplodeOffset = 15f; The distance in pixels a slice moves outward during the highlight effect.
`EnableTooltips`	bool	chart.EnableTooltips = true; Shows a tooltip with the slice label, value, and percentage on hover.

Public Methods

DataBind()

// Forces the chart to process the DataSource and render the slices.
// Must be called after changing the DataSource or mapping properties.
doughnutChart.DataBind();

GenerateSampleData()

// Populates the chart with dummy data for testing purposes.
doughnutChart.GenerateSampleData();

Events

Handle user interactions with specific slices or the chart center.

Event Descriptions & Wiring

// 1. SliceClick Event
// Fires when a user clicks on a slice.
chart.SliceClick += (s, e) => 
{
                MessageBox.Show($"Selected: {e.Label} ({e.Percentage:F1}%)");
};

// 2. CenterTextClick Event
// Fires when the user clicks the center hole area.
chart.CenterTextClick += (s, e) => 
{
                MessageBox.Show("Center clicked!");
};

// 3. AnimationCompleted Event
// Fires when the initial load animation finishes.
chart.AnimationCompleted += (s, e) => 
{
                Debug.WriteLine("Chart ready.");
};

Detailed Usage Examples

Example 1: Binding to a DataTable

Visualizing sales distribution by category.

C# - DataTable Binding

private void LoadSalesDistribution()
{
                DataTable dt = new DataTable();
    dt.Columns.Add("Category", typeof(string));
    dt.Columns.Add("Revenue", typeof(double));

    dt.Rows.Add("Electronics", 45000);
    dt.Rows.Add("Clothing", 28000);
    dt.Rows.Add("Home", 15000);
    dt.Rows.Add("Books", 8000);

    doughnutChart.DataSource = dt;
    doughnutChart.LabelMember = "Category";
    doughnutChart.ValueMember = "Revenue";
    
                // Customize Center Text
    doughnutChart.CenterText = "Total Revenue";
    
                // Auto-calculate total for subtext is handled internally, 
                // but you can override it:
    doughnutChart.CenterSubText = "$96,000";

    doughnutChart.Theme = SiticoneDoughnutChart.Themes.FirstOrDefault(t => t.Name == "Ocean");
    doughnutChart.DataBind();
}

Example 2: Custom List Binding

Binding a list of custom objects for a browser usage chart.

C# - Object Binding

public class BrowserStat
{
                public string Name { get; set; }
                public double Usage { get; set; }
}

private void LoadBrowserStats()
{
                var stats = new List<BrowserStat>
    {
                new BrowserStat { Name = "Chrome", Usage = 65.2 },
                new BrowserStat { Name = "Safari", Usage = 18.5 },
                new BrowserStat { Name = "Edge", Usage = 5.3 },
                new BrowserStat { Name = "Firefox", Usage = 3.2 },
                new BrowserStat { Name = "Other", Usage = 7.8 }
    };

    doughnutChart.DataSource = stats;
    doughnutChart.LabelMember = "Name";
    doughnutChart.ValueMember = "Usage";
    
                // Style Customization
    doughnutChart.HoleRadiusPercentage = 0.7f; // Thinner ring
    doughnutChart.ShowPercentageOnSlice = true;
    doughnutChart.Theme = SiticoneDoughnutChart.Themes.FirstOrDefault(t => t.Name == "Dark Indigo");
    
    doughnutChart.DataBind();
}