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
// 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.
// 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).
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.
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
public enum BubbleThemePreset
{
Custom,
Aqua,
Sunrise,
Forest,
Plum,
Monochrome,
// ... and many more
}