Siticone Funnel Chart

The SiticoneFunnelChart is a specialized visualization control used to represent stages in a process, such as a sales pipeline, conversion funnel, or project workflow. It displays data as progressively decreasing segments, making it easy to identify bottlenecks or drop-offs between stages.

Data Binding

The Funnel Chart requires a data source containing at least two fields: a value (numeric) and a label (string). Data is typically sorted in descending order automatically for the visual "funnel" effect.

Property	Type	Description & Usage Example
`DataSource`	object	chart.DataSource = myDataTable; The source of the data. Accepts `DataTable`, `List<T>`, or `IEnumerable`.
`ValueMember`	string	chart.ValueMember = "Count"; The name of the property or column containing the numeric value for each stage.
`LabelMember`	string	chart.LabelMember = "StageName"; The name of the property or column containing the label for each stage.

Appearance & Theming

Customize the visual style of the funnel, including segment colors, spacing, and label placement.

Property	Type	Description & Usage Example
`Theme`	FunnelThemePreset	chart.Theme = FunnelThemePreset.ProfessionalBlue; Applies a preset color scheme. Options include `EmeraldGreen`, `RubyRed`, `Oceanic`, etc.
`SegmentColors`	List<Color>	chart.SegmentColors = new List<Color>{ Color.Red, Color.Blue }; A custom list of colors to cycle through for the segments. Setting this overrides the Theme.
`SegmentSpacing`	float	chart.SegmentSpacing = 5f; The vertical gap (in pixels) between funnel segments.
`LabelDisplayMode`	FunnelLabelDisplayMode	chart.LabelDisplayMode = FunnelLabelDisplayMode.Outside; Controls where labels appear: `Inside`, `Outside`, or `Auto` (based on space).

Behavior & Interaction

Control animations and interactive feedback for the user.

Property	Type	Description & Usage Example
`EnableAnimations`	bool	chart.EnableAnimations = true; If true, the funnel segments animate vertically when data is loaded.
`EnableHighlight`	bool	chart.EnableHighlight = true; Highlights the segment under the mouse cursor by brightening its color and adding a slight "pop" effect.
`EnableTooltips`	bool	chart.EnableTooltips = true; Shows a tooltip with the Label, Value, and Conversion Rate (percentage of previous step) on hover.

Public Methods

DataBind()

// Forces the chart to process the DataSource and render the funnel segments.
// Call this after changing data or member mappings.
funnelChart.DataBind();

Events

Respond to user interaction with funnel segments.

Event Descriptions & Wiring

// 1. SegmentClick Event
// Fires when a user clicks a segment.
chart.SegmentClick += (s, e) => 
{
                MessageBox.Show($"Stage: {e.Label}\nValue: {e.Value}");
};

// 2. SegmentHover Event
// Fires when the mouse enters a segment.
chart.SegmentHover += (s, e) => 
{
    statusLabel.Text = $"Conversion Rate: {e.ConversionRate:P1}";
};

// 3. DataLoaded Event
// Fires after data processing is complete.
chart.DataLoaded += (s, e) => 
{
                Console.WriteLine($"Funnel loaded with {e.SegmentCount} stages.");
};

Detailed Usage Examples

Example 1: Sales Pipeline (DataTable)

Visualizing a sales process from leads to closed deals.

C# - Sales Funnel

private void LoadSalesPipeline()
{
                DataTable dt = new DataTable();
    dt.Columns.Add("Stage", typeof(string));
    dt.Columns.Add("Count", typeof(int));

    dt.Rows.Add("Impressions", 5000);
    dt.Rows.Add("Clicks", 2500);
    dt.Rows.Add("Sign-Ups", 800);
    dt.Rows.Add("Purchases", 150);

    funnelChart.DataSource = dt;
    funnelChart.LabelMember = "Stage";
    funnelChart.ValueMember = "Count";
    
                // Styling
    funnelChart.Theme = FunnelThemePreset.Oceanic;
    funnelChart.LabelDisplayMode = FunnelLabelDisplayMode.Outside;
    
    funnelChart.DataBind();
}

Example 2: Recruitment Process (List of Objects)

Using a custom class to track candidates through hiring stages.

C# - Recruitment Funnel

public class HiringStage
{
                public string Name { get; set; }
                public int Candidates { get; set; }
}

private void LoadRecruitmentData()
{
                var stages = new List<HiringStage>
    {
                new HiringStage { Name = "Applied", Candidates = 200 },
                new HiringStage { Name = "Screened", Candidates = 80 },
                new HiringStage { Name = "Interviewed", Candidates = 30 },
                new HiringStage { Name = "Offer Made", Candidates = 10 },
                new HiringStage { Name = "Hired", Candidates = 8 }
    };

    funnelChart.DataSource = stages;
    funnelChart.LabelMember = "Name";
    funnelChart.ValueMember = "Candidates";
    
                // Custom Green Theme
    funnelChart.Theme = FunnelThemePreset.EmeraldGreen;
    funnelChart.DataBind();
}

Enumerations

FunnelThemePreset Enum

public enum FunnelThemePreset
{
    Custom, 
    ProfessionalBlue, 
    EmeraldGreen, 
    RubyRed, 
    AmethystPurple, 
    Goldenrod, 
    Graphite,
                // ... and many more
}

FunnelLabelDisplayMode Enum

public enum FunnelLabelDisplayMode
{
    Auto,    // Attempts to place inside, falls back to outside if too small
    Inside,  // Always draws label inside the segment
    Outside  // Draws a leader line and label to the right of the funnel
}