Siticone Bar Chart
The SiticoneBarChart is a versatile and aesthetically pleasing control for visualizing categorical data.
It supports extensive theming, both vertical and horizontal orientations, and includes built-in animations for a modern user experience.
Data Binding
Properties for mapping your data source to the visual bars.
| Property | Type | Description & Usage Example |
|---|---|---|
DataSource |
object |
barChart.DataSource = myDataTable;
The source of the data. Accepts DataTable, List<T>, or any object implementing IListSource.
|
ValueMember |
string | barChart.ValueMember = "TotalSales"; The name of the property or column that contains the numeric value for the bar height/width. |
LabelMember |
string | barChart.LabelMember = "MonthName"; The name of the property or column used for the axis labels. |
Appearance & Theming
Customize the look and feel of the chart using built-in themes and layout options.
| Property | Type | Description & Usage Example |
|---|---|---|
Theme |
BarChartTheme | barChart.Theme = SiticoneBarChart.Themes.Find(t => t.Name == "Ocean Teal"); Applies a preset color scheme affecting bars, backgrounds, and grids. Includes 20+ presets like "Forest Green", "Royal Purple", and "Dark Blue". |
Orientation |
BarChartOrientation | barChart.Orientation = BarChartOrientation.Horizontal; Determines if bars are drawn vertically (columns) or horizontally (rows). |
BarWidthPercentage |
float | barChart.BarWidthPercentage = 0.8f; Controls the thickness of the bars relative to the available space (0.1 to 1.0). |
ShowValueOnBar |
bool | barChart.ShowValueOnBar = true; Displays the numeric value directly on top (or to the right) of the bar. |
Behavior & Interaction
Control animations and user feedback.
| Property | Type | Description & Usage Example |
|---|---|---|
EnableAnimations |
bool | barChart.EnableAnimations = true; Toggles the smooth "growing" animation when data is loaded or the control is first displayed. |
EnableHighlight |
bool | barChart.EnableHighlight = true; When enabled, bars lighten in color when the mouse hovers over them. |
EnableTooltips |
bool | barChart.EnableTooltips = true; Shows a floating info box with the exact value and label when hovering over a bar. |
AutoScaleMaxValue |
bool | barChart.AutoScaleMaxValue = true; Automatically calculates the axis maximum based on the highest data value to ensure all bars fit. |
Public Methods
// Refreshes the chart data from the assigned DataSource.
// Call this after changing the DataSource, ValueMember, or LabelMember.
barChart.DataBind();
// Populates the chart with dummy data for testing purposes.
// Useful for design-time visualization or prototyping.
barChart.GenerateSampleData();
Events
Respond to user interaction with specific bars.
// 1. BarClick Event
// Fires when a user clicks on a specific bar.
barChart.BarClick += (s, e) =>
{
MessageBox.Show($"You clicked {e.Label} with value {e.Value}");
// e.BarIndex provides the index in the data source
};
// 2. BarHover Event
// Fires when the mouse pointer enters a bar's area.
barChart.BarHover += (s, e) =>
{
lblStatus.Text = $"Hovering over: {e.Label}";
};
Detailed Usage Examples
Example 1: Binding to a DataTable
The most common scenario involving data from a database.
private void LoadChartData()
{
// 1. Create Data
DataTable dt = new DataTable();
dt.Columns.Add("Product", typeof(string));
dt.Columns.Add("Sales", typeof(double));
dt.Rows.Add("Laptops", 15000);
dt.Rows.Add("Phones", 23000);
dt.Rows.Add("Tablets", 8500);
// 2. Configure Chart
siticoneBarChart1.DataSource = dt;
siticoneBarChart1.LabelMember = "Product";
siticoneBarChart1.ValueMember = "Sales";
// 3. Styling
siticoneBarChart1.Theme = siticoneBarChart1.Theme = SiticoneBarChart.Themes.FirstOrDefault(t => t.Name == "Ocean Teal");
siticoneBarChart1.Orientation = SiticoneBarChart.BarChartOrientation.Vertical;
}
Example 2: Binding to a List of Objects
Ideal for modern applications using Entity Framework or custom models.
public class MonthlyStat
{
public string Month { get; set; }
public int Visitors { get; set; }
}
private void BindStats()
{
var stats = new List<MonthlyStat>
{
new MonthlyStat { Month = "Jan", Visitors = 500 },
new MonthlyStat { Month = "Feb", Visitors = 750 },
new MonthlyStat { Month = "Mar", Visitors = 600 }
};
siticoneBarChart1.DataSource = stats;
siticoneBarChart1.LabelMember = "Month";
siticoneBarChart1.ValueMember = "Visitors";
// Use a dark theme
siticoneBarChart1.Theme = SiticoneBarChart.Themes.FirstOrDefault(t => t.Name == "Dark Green");
}
Example 3: Horizontal Orientation & Customization
Creating a leaderboard-style chart.
private void SetupLeaderboard()
{
siticoneBarChart1.GenerateSampleData();
// Switch to horizontal bars
siticoneBarChart1.Orientation = SiticoneBarChart.BarChartOrientation.Horizontal;
// Make bars thicker
siticoneBarChart1.BarWidthPercentage = 0.85f;
// Ensure values are visible
siticoneBarChart1.ShowValueOnBar = true;
// Set a vibrant theme
siticoneBarChart1.Theme = SiticoneBarChart.Themes.FirstOrDefault(t => t.Name == "Sunset Orange");
}