Chart Series Painters

Overview

Namespace: TheTechIdea.Beep.Winform.Controls.Charts
Assembly: TheTechIdea.Beep.Winform.Controls.dll

The charting system provides five concrete series painters, each responsible for rendering a distinct chart type. All painters implement the internal IChartSeriesPainter interface and are resolved at runtime via the SeriesPainterFactory static factory class. Each painter receives coordinate conversion delegates (toX / toY) that map data-space values to pixel-space positions within the computed plot rectangle. Series rendering is configured through the SeriesRenderOptions data class, which carries all style, layout, and behavior flags.

SeriesPainterFactory

The static SeriesPainterFactory class maps ChartType enum values to concrete painter instances. LineSeriesPainter serves as the default fallback for any unrecognized or unspecified chart type.

internal static class SeriesPainterFactory
{
    public static IChartSeriesPainter Get(ChartType type)
    {
        switch (type)
        {
            case ChartType.Bar:    return new BarSeriesPainter();
            case ChartType.Line:   return new LineSeriesPainter();
            case ChartType.Pie:    return new PieSeriesPainter();
            case ChartType.Area:   return new AreaSeriesPainter();
            case ChartType.Bubble: return new BubbleSeriesPainter();
            default:               return new LineSeriesPainter();
        }
    }
}

The factory is called once during chart initialization in BeepChart.cs and the resolved painter instance is cached for the lifetime of the chart control. If ChartType is changed at runtime, the painter is re-resolved and Initialize() is called again.

IChartSeriesPainter Contract

Every series painter implements this internal interface. The two-method contract separates drawing from hit-test area registration:

internal interface IChartSeriesPainter
{
    void Initialize(BaseControl owner);

    void DrawSeries(Graphics g, Rectangle plotRect,
        List<ChartDataSeries> data,
        Func<ChartDataPoint, object> toX,
        Func<ChartDataPoint, object> toY,
        float xMin, float xMax, float yMin, float yMax,
        List<Color> palette, Color axisColor, Color textColor,
        SeriesRenderOptions options);

    void UpdateHitAreas(BaseControl owner, Rectangle plotRect,
        List<ChartDataSeries> data,
        Func<ChartDataPoint, PointF> toScreen,
        Action<string, Rectangle> notifyAreaHit);
}

Coordinate Conversion

The toX and toY delegates are closures created in BeepChart.Drawing.cs that encapsulate the axis type detection and value conversion logic:

Func<ChartDataPoint, object> toX = point =>
    plotRect.Left + (BeepChartDataHelper.ConvertXValue(chart, point) - xMin)
        / (xMax - xMin) * plotRect.Width;

Func<ChartDataPoint, object> toY = point =>
    plotRect.Bottom - (BeepChartDataHelper.ConvertYValue(chart, point) - yMin)
        / (yMax - yMin) * plotRect.Height;

BarSeriesPainter

Renders vertical bars for each data point in the series. Key features:

// BarSeriesPainter core loop (simplified):
int seriesCount = data.Count;
float colWidth = plotRect.Width / (float)(xMax - xMin + 1);
float groupWidth = colWidth * options.BarWidth;
float barWidth = groupWidth / seriesCount;

foreach (var series in data)
{
    int seriesIdx = data.IndexOf(series);
    Color color = palette[seriesIdx % palette.Count];
    float prevY = plotRect.Bottom; // baseline for stacked

    foreach (var point in series.DataPoints)
    {
        float xVal = Convert.ToSingle(toX(point));
        float yVal = Convert.ToSingle(toY(point));
        float x = xVal - groupWidth / 2f + barWidth * seriesIdx;

        float barHeight = options.Stacked
            ? prevY - yVal
            : plotRect.Bottom - yVal;

        if (barHeight < 0) // negative values
        {
            y = plotRect.Bottom;
            barHeight = plotRect.Bottom - yVal;
        }

        g.FillRectangle(new SolidBrush(color), x, yVal, barWidth, barHeight);

        if (options.Stacked) prevY -= barHeight;
    }
}

LineSeriesPainter

Renders connected line segments for each series' data points. Key features:

// Bezier smoothing calculation (Catmull-Rom to Bezier):
private PointF[] GetBezierControlPoints(PointF p0, PointF p1, PointF p2, PointF p3)
{
    float tension = 0.5f;
    PointF cp1 = new PointF(
        p1.X + (p2.X - p0.X) / (6f / tension),
        p1.Y + (p2.Y - p0.Y) / (6f / tension));
    PointF cp2 = new PointF(
        p2.X - (p3.X - p1.X) / (6f / tension),
        p2.Y - (p3.Y - p1.Y) / (6f / tension));
    return new PointF[] { p1, cp1, cp2, p2 };
}

// Marker rendering dispatch:
void DrawMarker(Graphics g, PointF pt, MarkerStyle style, int size, Color color)
{
    int half = size / 2;
    switch (style)
    {
        case MarkerStyle.Circle:
            g.FillEllipse(brush, pt.X - half, pt.Y - half, size, size); break;
        case MarkerStyle.Square:
            g.FillRectangle(brush, pt.X - half, pt.Y - half, size, size); break;
        case MarkerStyle.Diamond:
            PointF[] diamond = { new(pt.X, pt.Y-half), new(pt.X+half, pt.Y),
                new(pt.X, pt.Y+half), new(pt.X-half, pt.Y) };
            g.FillPolygon(brush, diamond); break;
        case MarkerStyle.Triangle:
            PointF[] tri = { new(pt.X, pt.Y-half), new(pt.X+half, pt.Y+half),
                new(pt.X-half, pt.Y+half) };
            g.FillPolygon(brush, tri); break;
    }
}

PieSeriesPainter

Renders proportional pie or donut slices. Key features:

// Pie slice rendering (simplified):
float sweepAngle = (pointY / totalY) * 360f;
float midAngle = startAngle + sweepAngle / 2f;
float labelRad = (pieRadius * 0.7f);

g.FillPie(brush, pieRect, startAngle, sweepAngle);
g.DrawPie(pen, pieRect, startAngle, sweepAngle);

if (options.ShowDataLabels)
{
    float pct = (pointY / totalY) * 100f;
    float labelX = center.X + (float)Math.Cos(ToRadians(midAngle)) * labelRad;
    float labelY = center.Y + (float)Math.Sin(ToRadians(midAngle)) * labelRad;
    g.DrawString($"{pct:F1}%", font, textBrush, labelX, labelY, sf);
}

// Donut hole:
if (options.InnerRadius > 0)
{
    float holeSize = pieRadius * options.InnerRadius;
    RectangleF holeRect = new(center.X - holeSize, center.Y - holeSize, holeSize*2, holeSize*2);
    g.FillEllipse(bgBrush, holeRect);
}

AreaSeriesPainter

Renders filled polygon areas below connected line segments. Key features:

// Area fill construction (simplified):
List<PointF> polygonPoints = new();
foreach (var point in series.DataPoints)
    polygonPoints.Add(new PointF(Single(toX(point)), Single(toY(point))));

// Close the polygon at the baseline
if (options.Stacked)
    for (int i = series.DataPoints.Count - 1; i >= 0; i--)
        polygonPoints.Add(new PointF(Single(toX(series.DataPoints[i])), baseY));

g.FillPolygon(new SolidBrush(Color.FromArgb(fillAlpha, color)), polygonPoints.ToArray());
g.DrawLines(pen, polygonPoints.Take(dataPoints.Count).ToArray());

BubbleSeriesPainter

Renders proportional circles at XY coordinates. Key features:

// Bubble rendering (simplified):
float maxSize = data.SelectMany(s => s.DataPoints).Max(p => float.Parse(p.Y));
float sizeScale = (plotRect.Width * plotRect.Height) / (maxSize * 20f);

foreach (var series in data)
{
    Color color = palette[data.IndexOf(series) % palette.Count];
    using var fillBrush = new SolidBrush(Color.FromArgb(180, color));
    using var pen = new Pen(color, 2f);

    foreach (var point in series.DataPoints)
    {
        float cx = Convert.ToSingle(toX(point));
        float cy = Convert.ToSingle(toY(point));
        float val = float.Parse(point.Y);
        float radius = (float)Math.Sqrt(val * sizeScale / Math.PI);
        float r = Math.Max(radius, 3f);

        g.FillEllipse(fillBrush, cx - r, cy - r, r * 2f, r * 2f);
        g.DrawEllipse(pen, cx - r, cy - r, r * 2f, r * 2f);
    }
}

SeriesRenderOptions Reference

The SeriesRenderOptions data class encapsulates all configurable rendering parameters for series painters. Each painter reads the subset of options relevant to its chart type and ignores others (e.g., BarSeriesPainter uses BarWidth and BarPadding but ignores MarkerShape).

Additional internal fields: SeriesColor (nullable override color), EnableAnimation (future), AnimationDurationMs (future, default 400).

Examples

Pie Donut Chart

var chart = new BeepChart();
chart.ChartType = ChartType.Pie;
chart.ChartTitle = "Market Share";

chart.DataSeries.Add(new ChartDataSeries
{
    SeriesName = "Browser Share",
    DataPoints = new List<ChartDataPoint>
    {
        new() { X = "Chrome", Y = "65" },
        new() { X = "Edge", Y = "12" },
        new() { X = "Firefox", Y = "8" },
        new() { X = "Safari", Y = "10" },
        new() { X = "Other", Y = "5" }
    }
});

// Enable donut mode with 50% inner radius
chart.InnerRadius = 0.5f;
chart.ShowDataLabels = true;

Stacked Bar Chart

chart.ChartType = ChartType.Bar;
chart.Stacked = true;
chart.BarWidth = 0.7f;
chart.BarPadding = 0.3f;
chart.ChartTitle = "Quarterly Revenue by Product";

chart.DataSeries.Clear();
chart.DataSeries.Add(new ChartDataSeries
{
    SeriesName = "Product A",
    DataPoints = new List<ChartDataPoint>
    {
        new() { X = "Q1", Y = "1200" },
        new() { X = "Q2", Y = "1400" },
        new() { X = "Q3", Y = "1100" },
        new() { X = "Q4", Y = "1600" }
    }
});
chart.DataSeries.Add(new ChartDataSeries
{
    SeriesName = "Product B",
    DataPoints = new List<ChartDataPoint>
    {
        new() { X = "Q1", Y = "800" },
        new() { X = "Q2", Y = "700" },
        new() { X = "Q3", Y = "900" },
        new() { X = "Q4", Y = "600" }
    }
});
chart.DataSeries.Add(new ChartDataSeries
{
    SeriesName = "Product C",
    DataPoints = new List<ChartDataPoint>
    {
        new() { X = "Q1", Y = "500" },
        new() { X = "Q2", Y = "600" },
        new() { X = "Q3", Y = "400" },
        new() { X = "Q4", Y = "700" }
    }
});

Smooth Line Chart with Markers

chart.ChartType = ChartType.Line;
chart.SmoothLines = true;
chart.ShowMarkers = true;
chart.MarkerShape = MarkerStyle.Diamond;
chart.MarkerSize = 8;
chart.ChartTitle = "Temperature Trend";

chart.DataSeries.Clear();
chart.DataSeries.Add(new ChartDataSeries
{
    SeriesName = "Sensor A",
    DataPoints = new List<ChartDataPoint>
    {
        new() { X = "Jan", Y = "22" },
        new() { X = "Feb", Y = "24" },
        new() { X = "Mar", Y = "28" },
        new() { X = "Apr", Y = "32" },
        new() { X = "May", Y = "35" },
        new() { X = "Jun", Y = "38" }
    }
});

// Custom draw hook for additional styling
chart.CustomDrawSeries += (s, e) =>
{
    if (e.SeriesIndex == 0)
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
};

Programmatic Painter Selection

// Direct factory usage (internal, for testing/extension):
IChartSeriesPainter painter = SeriesPainterFactory.Get(ChartType.Bubble);
painter.Initialize(chart);
painter.DrawSeries(g, plotRect, chart.DataSeries,
    toX, toY, xMin, xMax, yMin, yMax,
    palette, axisColor, textColor, options);
painter.UpdateHitAreas(chart, plotRect, chart.DataSeries,
    toScreen, (key, rect) => chart.HitAreas[key] = rect);