Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Bubble Chart

Siticone Bubble Chart

The SiticoneBubbleChart is a multidimensional data visualization tool that displays three dimensions of data on a two-dimensional plot. Data points are defined by their horizontal (X) and vertical (Y) positions, while a third value determines the size of the bubble marker.

Data Binding

To visualize data, the Bubble Chart requires four key mappings: the data source itself, and the property names for the X-axis, Y-axis, bubble size, and label.

Property Type Description & Usage Example
DataSource object chart.DataSource = myProductData; The data container holding your records. Supports DataTable, List<T>, or IEnumerable.
XValueMember string chart.XValueMember = "MarketShare"; The property name for the horizontal X-axis value.
YValueMember string chart.YValueMember = "GrowthRate"; The property name for the vertical Y-axis value.
SizeValueMember string chart.SizeValueMember = "Revenue"; The property name determining the diameter of the bubble. Larger values result in larger bubbles.
LabelMember string chart.LabelMember = "ProductName"; The property name used for identifying the bubble in tooltips and events.

Appearance & Theming

Customize the aesthetics of the chart, including colors, borders, and built-in themes.

Property Type Description & Usage Example
Theme BubbleThemePreset chart.Theme = BubbleThemePreset.Aqua; Applies a predefined color scheme. Options include Aqua, Sunrise, Forest, Neon, etc.
BubbleColor Color chart.BubbleColor = Color.FromArgb(150, 255, 0, 0); The fill color of the bubbles. Using a transparent color (Alpha < 255) allows overlapping bubbles to be visible.
BubbleBorderColor Color chart.BubbleBorderColor = Color.Red; The color of the outline stroke for each bubble.
BubbleBorderWidth float chart.BubbleBorderWidth = 2.0f; The thickness of the bubble outline.
ShowGrid bool chart.ShowGrid = true; Toggles the visibility of the background grid lines and axis ticks.

Behavior & Interaction

Control the chart's interactive features and animations.

Property Type Description & Usage Example
EnableAnimations bool chart.EnableAnimations = true; If true, bubbles will smoothly expand from the center when data is loaded.
EnableHighlight bool chart.EnableHighlight = true; When enabled, bubbles slightly expand/pop when the mouse hovers over them.
EnableTooltips bool chart.EnableTooltips = true; Shows a floating popup with X, Y, and Size values when hovering over a bubble.

Public Methods

DataBind()
// Forces the chart to read the DataSource and render the bubbles.
// Call this after setting DataSource or member properties.
bubbleChart.DataBind();

Events

Respond to user interaction with specific bubbles.

Event Descriptions & Wiring
// 1. BubbleClick Event
// Fires when a user clicks on a bubble.
chart.BubbleClick += (s, e) => 
{
                MessageBox.Show($"Clicked {e.Label}.\nSize: {e.SizeValue}");
};

// 2. BubbleHover Event
// Fires when the mouse pointer enters a bubble.
chart.BubbleHover += (s, e) => 
{
    statusLabel.Text = $"Analyzing: {e.Label} (X:{e.XValue}, Y:{e.YValue})";
};

Detailed Usage Examples

Example 1: Market Analysis (DataTable)

This example visualizes products based on Market Share (X), Growth Rate (Y), and Revenue (Bubble Size).

C# - DataTable Binding
private void LoadMarketData()
{
                // 1. Create Data
                DataTable dt = new DataTable();
    dt.Columns.Add("Product", typeof(string));
    dt.Columns.Add("Share", typeof(double));   // X Axis
    dt.Columns.Add("Growth", typeof(double));  // Y Axis
    dt.Columns.Add("Revenue", typeof(double)); // Bubble Size

    dt.Rows.Add("Product A", 45, 5, 8000);
    dt.Rows.Add("Product B", 15, 20, 3000);
    dt.Rows.Add("Product C", 10, -5, 1500);

                // 2. Bind Data
    bubbleChart.DataSource = dt;
    bubbleChart.LabelMember = "Product";
    bubbleChart.XValueMember = "Share";
    bubbleChart.YValueMember = "Growth";
    bubbleChart.SizeValueMember = "Revenue";

                // 3. Style
    bubbleChart.Theme = BubbleThemePreset.Aqua;
    bubbleChart.DataBind();
}

Example 2: Project Risk Analysis (List of Objects)

Visualizing projects by Risk (X), ROI (Y), and Budget (Size) using a custom data class.

C# - Object Binding
public class Project
{
                public string Name { get; set; }
                public double RiskScore { get; set; } // 0-100
                public double ROI { get; set; }       // %
                public double Budget { get; set; }    // $
}

private void LoadProjectData()
{
                var projects = new List<Project>
    {
                new Project { Name = "Alpha", RiskScore = 80, ROI = 25, Budget = 500000 },
                new Project { Name = "Beta", RiskScore = 20, ROI = 5, Budget = 100000 },
                new Project { Name = "Gamma", RiskScore = 50, ROI = 15, Budget = 300000 }
    };

    bubbleChart.DataSource = projects;
    bubbleChart.LabelMember = "Name";
    bubbleChart.XValueMember = "RiskScore";
    bubbleChart.YValueMember = "ROI";
    bubbleChart.SizeValueMember = "Budget";
    
                // Custom Styling (Manual Colors)
    bubbleChart.Theme = BubbleThemePreset.Custom;
    bubbleChart.BubbleColor = Color.FromArgb(180, Color.OrangeRed);
    bubbleChart.BubbleBorderColor = Color.DarkRed;
    
    bubbleChart.DataBind();
}

Enumerations

BubbleThemePreset Enum
public enum BubbleThemePreset
{
    Custom, 
    Aqua, 
    Sunrise, 
    Forest, 
    Plum, 
    Monochrome,
                // ... and many more
}