Siticone Area Chart (ZB)

The SiticoneZBAreaChart is an advanced multi-series area chart control. It emphasizes the magnitude of change over time and can be used to draw attention to the total value across a trend. It supports stacked series, curved lines (splines), and rich gradient fills.

Data Binding

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

Property	Type	Description & Usage Example
`DataSource`	object	chart.DataSource = myDataTable; The source of the data. Accepts `DataTable`, `List<T>`, or `IEnumerable`.
`ValueMember`	string	chart.ValueMember = "Sales"; The name of the numeric property or column to plot on the Y-Axis.
`LabelMember`	string	chart.LabelMember = "Month"; The name of the property or column used for X-Axis labels.

Appearance & Styling

Customize the visual presentation, including stacking, baselines, and curves.

Property	Type	Description & Usage Example
`StackSeries`	bool	chart.StackSeries = true; If true, series are stacked on top of each other to show cumulative volume. If false, they are drawn independently (overlapping).
`DefaultUseCurvedAreas`	bool	chart.DefaultUseCurvedAreas = true; Renders the top edge of the area as a smooth Bézier curve instead of straight lines.
`AreaOpacity`	float	chart.AreaOpacity = 0.7f; Controls the transparency of the area fill (0.0 to 1.0). Useful when `StackSeries` is false to see overlapping areas.
`BaselineValue`	double	chart.BaselineValue = 0; The Y-value from which the area is filled. Usually 0, but can be set higher/lower for deviation charts.
`FillToBaseline`	bool	chart.FillToBaseline = true; If true, the area fills towards the `BaselineValue`.
`Theme`	ChartTheme	chart.Theme = new ChartTheme { Name = "Forest" ... }; Applies a color theme to lines, fills, and grids.

Axes Configuration

Configure the X and Y axes specifically for area charts using XAxisAreaChart and YAxisAreaChart.

Property	Type	Description & Usage Example
`XAxisAreaChart.IsDateTimeAxisAreaChart`	bool	chart.XAxisAreaChart.IsDateTimeAxisAreaChart = true; Tells the chart to treat X values as dates for proper formatting.
`AutoScaleAxes`	bool	chart.AutoScaleAxes = true; Automatically calculates min/max values. Note: When `StackSeries` is true, this calculates the total stacked height.

Interaction & Tooltips

Interactive features for exploring the data.

Property	Type	Description & Usage Example
`EnableZooming`	bool	chart.EnableZooming = true; Allows programmatic zooming to specific data ranges.
`EnablePointHighlight`	bool	chart.EnablePointHighlight = true; Highlights individual data points on hover.
`ShowAdvancedToolTip`	bool	chart.ShowAdvancedToolTip = true; Shows a comprehensive tooltip listing values for all series at the hovered X-index (great for stacked charts).

Methods

AddSeries()

// Adds a new series to the chart.
// Returns the DataSeriesAreaChart object for configuration.
var series = chart.AddSeries(
                "Downloads", 
                Color.ForestGreen, 
                SiticoneZBLineStyle.Solid, 
                true // Use curved lines
);

series.Points.Add(new DataPointAreaChart(1, 500));
series.Points.Add(new DataPointAreaChart(2, 750));

DataBind()

// Triggers the data binding process after setting DataSource.
chart.DataSource = myData;
chart.ValueMember = "Value";
chart.LabelMember = "Date";
chart.DataBind();

Events

Handle user interactions and rendering events.

Event Descriptions & Wiring

// 1. DataPointAreaChartClick Event
// Fires when a user clicks a specific point on the chart.
chart.DataPointAreaChartClick += (s, e) => 
{
                MessageBox.Show($"Series: {e.Series.Name}, Value: {e.DataPointAreaChart.YValue}");
};

// 2. ZoomChanged Event
// Fires when the zoom level changes via ZoomTo() or ResetZoom().
chart.ZoomChanged += (s, e) => 
{
                Console.WriteLine("Zoom level updated.");
};

Detailed Usage Examples

Example 1: Basic Sales Trend

Simple area chart showing sales volume over time.

C# - Basic Area Chart

private void LoadSalesChart()
{
    chart.ClearSeries();
    
                var series = chart.AddSeries("Sales", Color.SeaGreen);
    series.UseCurvedLine = true;
    
                // Fill settings
    series.UseFillGradient = true;
    series.FillGradientStart = Color.FromArgb(180, Color.SeaGreen);
    series.FillGradientEnd = Color.FromArgb(20, Color.SeaGreen);

    series.Points.Add(new DataPointAreaChart(1, 1200));
    series.Points.Add(new DataPointAreaChart(2, 1500));
    series.Points.Add(new DataPointAreaChart(3, 1100));
    
    chart.Title = "Monthly Sales";
    chart.CalculateAxisAreaChartRanges();
}

Example 2: Stacked Server Load

Visualizing how CPU and Memory usage contribute to total system load.

C# - Stacked Area Chart

private void LoadServerStats()
{
                DataTable dt = new DataTable();
    dt.Columns.Add("Time", typeof(int));
    dt.Columns.Add("CPU", typeof(double));
    dt.Columns.Add("Memory", typeof(double));

    dt.Rows.Add(1, 30, 40);
    dt.Rows.Add(2, 45, 42);
    dt.Rows.Add(3, 20, 38);

                // Configure Chart
    chart.StackSeries = true; // Enable Stacking
    chart.AreaOpacity = 0.9f; // Solid look
    
                // Bind Data
    chart.DataSource = dt;
    chart.BindToDataTable(dt, "Time", new[] { "CPU", "Memory" });
    
    chart.Title = "System Load (Stacked)";
}

Example 3: Profit vs Loss (Baseline)

Chart showing values dipping below a baseline.

C# - Baseline Chart

private void LoadPnL()
{
                var series = chart.AddSeries("Net Income", Color.Teal);
    
                // Data including negatives
    series.Points.Add(new DataPointAreaChart(1, 5000));
    series.Points.Add(new DataPointAreaChart(2, -2000)); // Loss
    series.Points.Add(new DataPointAreaChart(3, 3000));

    chart.BaselineValue = 0;
    chart.FillToBaseline = true;
    
    chart.CalculateAxisAreaChartRanges();
    chart.Invalidate();
}

Enumerations

SiticoneZBLineStyle Enum

public enum SiticoneZBLineStyle
{
    Solid, 
    Dash, 
    Dot, 
    DashDot, 
                // ... plus extended styles like:
    HeartBeat, 
    ZigZag, 
    DataStream
}

AnimationTypeAreaChart Enum

public enum AnimationTypeAreaChart
{
    None, 
    FadeIn, 
    SlideInFromLeft, 
    SlideInFromBottom, 
    ProgressiveDraw
}