BeepChartWidget

Overview

BeepChartWidget is a paint-based WinForms widget that inherits from BaseControl. It uses an IWidgetPainter pipeline to render rich visuals without child controls. The Style property selects one of 7 built-in render modes; changing it at runtime immediately swaps the painter and triggers a repaint.

Toolbox icon: 📈
Category: Beep Widgets → Data / Charts
Default size: 300 × 200
Namespace: TheTechIdea.Beep.Winform.Controls.Widgets

Key Features

📊 Seven Chart Types

Bar, line, pie, gauge, sparkline, heatmap, combination — all via one Style enum.

🎨 Theme Palette

Colors defaults to the active theme's ChartDefaultSeriesColors list.

🖱️ Hit-test Events

DataPointClicked carries the clicked series index for drill-down navigation.

📐 Gridlines & Legend

ShowGrid and ShowLegend toggles with no extra configuration needed.

⚡ Pure GDI+

No third-party charting library — lightweight and always theme-consistent.

🔢 Axis Control

MinValue / MaxValue let you fix axis extents for meaningful comparisons.

Style Variants (7)

Style Value	Description
`BarChart`	Vertical or horizontal bar chart with optional gridlines.
`LineChart`	Smooth line or filled area chart for trend data.
`PieChart`	Pie or donut chart with optional legend.
`GaugeChart`	Speedometer-style gauge for a single KPI value.
`Sparkline`	Miniature inline trend line — ideal in tight layouts.
`HeatmapChart`	Calendar or grid heatmap for frequency/intensity data.
`CombinationChart`	Bar + line combination for comparing two series.

Properties

Property	Type	Default	Description
`Style`	ChartWidgetStyle	BarChart	Selects the chart type and painter.
`Title`	string	"Chart Title"	Optional header label drawn above the chart area.
`Values`	List<double>	[10,25,30…]	Primary data series.
`Labels`	List<string>	[Jan,Feb…]	Category labels aligned with Values.
`Colors`	List<Color>	(theme palette)	Per-series or per-segment colour list.
`ShowLegend`	bool	true	Show/hide the legend panel.
`ShowGrid`	bool	true	Show/hide background gridlines.
`MinValue`	double	0	Y-axis minimum (bar and line charts).
`MaxValue`	double	100	Y-axis maximum (bar and line charts).
`AccentColor`	Color	(theme primary)	Dominant accent used for single-series charts.

Inherits all BaseControl properties (Border, Padding, Theme colors, etc.).

Events

Event	Args Type	Description
`ChartClicked`	BeepEventDataArgs	Fired when the chart background area is clicked.
`DataPointClicked`	BeepEventDataArgs	Fired when a bar, segment, or data point is clicked. Data contains index.
`LegendClicked`	BeepEventDataArgs	Fired when a legend item is clicked. Data contains series label.

Basic Usage

var chart = new BeepChartWidget
{
    Style      = ChartWidgetStyle.LineChart,
    Title      = "Weekly Sales",
    Values     = new List { 120, 135, 98, 160, 175, 210, 195 },
    Labels     = new List { "Mon","Tue","Wed","Thu","Fri","Sat","Sun" },
    ShowLegend = false,
    ShowGrid   = true,
    Size       = new Size(360, 220)
};
this.Controls.Add(chart);

Event Handling

chart.DataPointClicked += (s, e) =>
{
    int idx = (int)e.Data;  // index into Values/Labels
    MessageBox.Show($"Clicked: {chart.Labels[idx]} = {chart.Values[idx]}");
};

Best Practices

Set Style before adding the widget to the form to avoid double repaints.
Adjust Size to fit your layout — defaults are minimum comfortable sizes.
Read BeepEventDataArgs.Data in event handlers for context-specific click data.
Call Invalidate() after updating data properties to trigger a repaint.
Let theme colors flow from BeepStyling.CurrentTheme — avoid overriding color properties unless customization is explicitly desired.