Siticone Logo
Siticone UI
DOCS
v2025.12.15
Docs Bar Chart

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

DataBind()
// Refreshes the chart data from the assigned DataSource.
// Call this after changing the DataSource, ValueMember, or LabelMember.
barChart.DataBind();
GenerateSampleData()
// 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.

Event Descriptions & Wiring
// 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.

C# - DataTable Binding
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.

C# - List Binding
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.

C# - Horizontal Layout
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");
}