Siticone Line Chart Advanced

The SiticoneLineChartAdvanced is a sleek, single-series visualization control designed for modern UI applications. It supports Bézier curves, gradient area fills, smooth animations, and detailed tooltips, making it perfect for tracking trends, server metrics, or financial data.

Data Binding

The chart supports standard data binding via DataSource or manual point insertion.

Property	Type	Description & Usage Example
`DataSource`	object	chart.DataSource = salesTable; The source of the data. Accepts `DataTable`, `List<T>`, or `IEnumerable`.
`ValueMember`	string	chart.ValueMember = "Revenue"; The name of the numeric property or column to plot on the Y-Axis.
`LabelMember`	string	chart.LabelMember = "Date"; The name of the property or column used for X-Axis labels.
`LabelFormat`	string	chart.LabelFormat = "MMM dd"; A standard format string used when the `LabelMember` is a DateTime object.

Appearance & Theming

Customize the lines, points, fills, and overall color scheme.

Property	Type	Description & Usage Example
`Theme`	ChartTheme	chart.Theme = SiticoneLineChartAdvanced.Themes.Find(t => t.Name == "Forest Green"); Applies a preset theme containing colors for lines, points, grids, and gradients.
`UseBezierCurves`	bool	chart.UseBezierCurves = true; If true, renders the line using smooth Bézier curves instead of straight jagged lines.
`EnableGradientFill`	bool	chart.EnableGradientFill = true; Fills the area under the line with a vertical gradient defined by the current theme.
`LineWidth`	float	chart.LineWidth = 3.0f; The thickness of the main chart line.
`PointSize`	float	chart.PointSize = 8.0f; The diameter of the circular markers at each data point. Set to 0 to hide points.
`ShowGridLines`	bool	chart.ShowGridLines = true; Toggles the visibility of horizontal grid lines.

Behavior & Interaction

Control scaling, animations, and user feedback.

Property	Type	Description & Usage Example
`AutoScaleMaxValue`	bool	chart.AutoScaleMaxValue = true; Automatically calculates the Y-axis maximum based on the highest data value plus padding.
`MaxValue`	double	chart.MaxValue = 100.0; Manually sets the Y-axis maximum. Only effective if `AutoScaleMaxValue` is false.
`EnableAnimations`	bool	chart.EnableAnimations = true; Toggles the "draw" animation when data is loaded.
`EnableTooltips`	bool	chart.EnableTooltips = true; Shows a floating popup with the exact Y-value when hovering over a data point.

Public Methods

DataBind()

// Forces the chart to process the DataSource and render the line.
// Call this after setting the DataSource or changing mapping properties.
chart.DataBind();

GenerateSampleData()

// Populates the chart with random dummy data.
// Useful for design-time visualization.
chart.GenerateSampleData();

Events

Handle custom drawing or user interactions.

Event Descriptions & Wiring

// 1. DataPointClick Event
// Fires when a user clicks a specific data point marker.
chart.DataPointClick += (s, e) => 
{
                MessageBox.Show($"Value: {e.Value}\nLabel: {e.Label}");
};

// 2. DataPointHover Event
// Fires when the mouse moves over a data point.
chart.DataPointHover += (s, e) => 
{
    statusLabel.Text = $"Analyzing point {e.PointIndex + 1}: {e.Value}";
};

// 3. BeforeDraw / AfterDraw Events
// Fires before or after the chart content is rendered.
// Use e.Graphics to draw custom overlays or backgrounds.
chart.AfterDraw += (s, e) => 
{
                // Draw a custom watermark
    e.Graphics.DrawString("CONFIDENTIAL", this.Font, Brushes.Red, 10, 10);
};

Detailed Usage Examples

Example 1: Sales Trends (DataTable)

Visualizing daily revenue with date formatting.

C# - DataTable Binding

private void LoadSalesTrends()
{
                DataTable dt = new DataTable();
    dt.Columns.Add("Date", typeof(DateTime));
    dt.Columns.Add("Sales", typeof(double));

    dt.Rows.Add(DateTime.Today.AddDays(-4), 500);
    dt.Rows.Add(DateTime.Today.AddDays(-3), 750);
    dt.Rows.Add(DateTime.Today.AddDays(-2), 600);
    dt.Rows.Add(DateTime.Today.AddDays(-1), 900);
    dt.Rows.Add(DateTime.Today, 1200);

    chart.DataSource = dt;
    chart.LabelMember = "Date";
    chart.ValueMember = "Sales";
    
                // Format dates on X-Axis
    chart.LabelFormat = "MMM dd"; 

    chart.Theme = SiticoneLineChartAdvanced.Themes.Find(t => t.Name == "Ocean Teal");
    chart.DataBind();
}

Example 2: Server Monitoring (Object List)

Tracking CPU usage with smoothed curves and gradient fills.

C# - Object Binding

public class ServerMetric
{
                public string Time { get; set; }
                public double CpuLoad { get; set; }
}

private void LoadMetrics()
{
                var metrics = new List<ServerMetric>
    {
                new ServerMetric { Time = "10:00", CpuLoad = 15 },
                new ServerMetric { Time = "10:05", CpuLoad = 45 },
                new ServerMetric { Time = "10:10", CpuLoad = 30 },
                new ServerMetric { Time = "10:15", CpuLoad = 80 },
                new ServerMetric { Time = "10:20", CpuLoad = 60 }
    };

    chart.DataSource = metrics;
    chart.LabelMember = "Time";
    chart.ValueMember = "CpuLoad";
    
                // Styling for smooth monitoring look
    chart.UseBezierCurves = true;
    chart.EnableGradientFill = true;
    chart.Theme = SiticoneLineChartAdvanced.Themes.Find(t => t.Name == "Crimson Red");
    
                // Fixed scale for percentages
    chart.AutoScaleMaxValue = false;
    chart.MaxValue = 100;

    chart.DataBind();
}

Example 3: Manual Data Point Insertion

Bypassing the DataSource property to manually control points.

C# - Manual Points

private void LoadManualData()
{
    chart.DataPoints.Clear();
    chart.XLabels.Clear();

                // Add raw values
    chart.DataPoints.Add(10);
    chart.DataPoints.Add(25);
    chart.DataPoints.Add(15);
    
                // Add matching labels
    chart.XLabels.Add("Step 1");
    chart.XLabels.Add("Step 2");
    chart.XLabels.Add("Step 3");

    chart.Invalidate();
}