Guide for implementing Syncfusion Gauge controls in Windows Forms applications. Use when creating data visualization gauges such as RadialGauge for circular displays (speedometers, temperature dials), LinearGauge for horizontal/vertical bars and progress indicators, or DigitalGauge for LED-style alphanumeric displays. Covers dashboard gauges, instrument panels, real-time monitoring, and KPI displays with needles, ranges, and scales.
Use this skill when the user needs to implement Syncfusion Gauge controls in a Windows Forms application. This skill covers three gauge types for different visualization needs:
When NOT to use: For simple text displays without gauge visualization, use standard Label or TextBox controls. For charts and graphs, use Chart controls.
Syncfusion provides three gauge controls for data visualization in Windows Forms:
Visualizes values on a circular or arc scale with customizable needles, ranges, and frames.
Key Features:
Visualizes values on a linear scale (horizontal or vertical) with pointer indicators.
Key Features:
Displays alphanumeric characters in LED/digital format.
Key Features:
All gauges support:
When user needs to set up gauge controls for the first time. Covers:
📄 Read: references/radial-gauge.md
When user needs circular, arc, or dial-style gauges. Covers:
📄 Read: references/linear-gauge.md
When user needs horizontal or vertical bar-style gauges. Covers:
📄 Read: references/digital-gauge.md
When user needs LED-style alphanumeric displays. Covers:
📄 Read: references/visual-themes.md
When user wants to apply professional themes or custom styling. Covers:
📄 Read: references/custom-renderers.md
When user needs complete control over gauge rendering and appearance. Covers:
📄 Read: references/data-binding.md
When user needs real-time data updates or database-driven gauges. Covers:
using Syncfusion.Windows.Forms.Gauge;
// Create RadialGauge
RadialGauge speedometer = new RadialGauge();
speedometer.Size = new Size(300, 300);
speedometer.Location = new Point(20, 20);
// Configure gauge properties
speedometer.MinimumValue = 0;
speedometer.MaximumValue = 200;
speedometer.MajorDifference = 20;
speedometer.MinorDifference = 5;
speedometer.Value = 60;
// Set frame type
speedometer.FrameType = FrameType.HalfCircle;
// Configure appearance
speedometer.ShowNeedle = true;
speedometer.NeedleStyle = NeedleStyle.Advanced;
speedometer.GaugeLabel = "Speed (MPH)";
// Add color-coded ranges
Range range1 = new Range();
range1.StartValue = 0;
range1.EndValue = 80;
range1.Color = Color.Green;
range1.Height = 10;
speedometer.Ranges.Add(range1);
Range range2 = new Range();
range2.StartValue = 80;
range2.EndValue = 150;
range2.Color = Color.Yellow;
range2.Height = 10;
speedometer.Ranges.Add(range2);
Range range3 = new Range();
range3.StartValue = 150;
range3.EndValue = 200;
range3.Color = Color.Red;
range3.Height = 10;
speedometer.Ranges.Add(range3);
// Add to form
this.Controls.Add(speedometer);
using Syncfusion.Windows.Forms.Gauge;
// Create LinearGauge
LinearGauge batteryLevel = new LinearGauge();
batteryLevel.Size = new Size(300, 125);
batteryLevel.Location = new Point(20, 20);
// Set horizontal orientation
batteryLevel.LinearFrameType = LinearFrameType.Horizontal;
// Configure gauge properties
batteryLevel.MinimumValue = 0;
batteryLevel.MaximumValue = 100;
batteryLevel.MajorDifference = 20;
batteryLevel.MinorTickCount = 3;
batteryLevel.Value = 75;
// Configure appearance
batteryLevel.ShowNeedle = true;
batteryLevel.PointerPlacement = Placement.Center;
// Add color-coded ranges
LinearRange lowRange = new LinearRange();
lowRange.StartValue = 0;
lowRange.EndValue = 20;
lowRange.Color = Color.Red;
lowRange.Height = 8;
batteryLevel.Ranges.Add(lowRange);
LinearRange normalRange = new LinearRange();
normalRange.StartValue = 20;
normalRange.EndValue = 80;
normalRange.Color = Color.Yellow;
normalRange.Height = 8;
batteryLevel.Ranges.Add(normalRange);
LinearRange highRange = new LinearRange();
highRange.StartValue = 80;
highRange.EndValue = 100;
highRange.Color = Color.Green;
highRange.Height = 8;
batteryLevel.Ranges.Add(highRange);
// Add to form
this.Controls.Add(batteryLevel);
using Syncfusion.Windows.Forms.Gauge;
// Create DigitalGauge
DigitalGauge digitalClock = new DigitalGauge();
digitalClock.Size = new Size(250, 100);
digitalClock.Location = new Point(20, 20);
// Configure character display
digitalClock.CharacterType = CharacterType.SevenSegment;
digitalClock.CharacterCount = 8;
digitalClock.SegmentSpacing = 2.0f;
// Set initial value
digitalClock.Value = DateTime.Now.ToString("HH:mm:ss");
// Configure appearance
digitalClock.ForeColor = Color.Red;
digitalClock.ShowInvisibleSegments = true;
// Add timer to update clock
Timer clockTimer = new Timer();
clockTimer.Interval = 1000; // 1 second
clockTimer.Tick += (s, e) => {
digitalClock.Value = DateTime.Now.ToString("HH:mm:ss");
};
clockTimer.Start();
// Add to form
this.Controls.Add(digitalClock);
// Create dashboard layout
FlowLayoutPanel dashboard = new FlowLayoutPanel();
dashboard.Dock = DockStyle.Fill;
// Temperature gauge (RadialGauge)
RadialGauge tempGauge = new RadialGauge();
tempGauge.MinimumValue = -20;
tempGauge.MaximumValue = 120;
tempGauge.Value = 72;
tempGauge.GaugeLabel = "°F";
tempGauge.FrameType = FrameType.HalfCircle;
dashboard.Controls.Add(tempGauge);
// Fuel level (LinearGauge)
LinearGauge fuelGauge = new LinearGauge();
fuelGauge.LinearFrameType = LinearFrameType.Vertical;
fuelGauge.MinimumValue = 0;
fuelGauge.MaximumValue = 100;
fuelGauge.Value = 45;
dashboard.Controls.Add(fuelGauge);
// Status counter (DigitalGauge)
DigitalGauge statusCounter = new DigitalGauge();
statusCounter.CharacterType = CharacterType.SevenSegment;
statusCounter.Value = "1234";
dashboard.Controls.Add(statusCounter);
this.Controls.Add(dashboard);
// Setup data source
DataTable sensorData = new DataTable();
sensorData.Columns.Add("SensorValue", typeof(float));
sensorData.Rows.Add(0);
// Create and bind gauge
RadialGauge sensorGauge = new RadialGauge();
sensorGauge.DataSource = sensorData;
sensorGauge.DisplayMember = "SensorValue";
sensorGauge.DisplayRecordIndex = 0;
// Timer to simulate sensor updates
Timer dataTimer = new Timer();
dataTimer.Interval = 100; // 10 updates per second
dataTimer.Tick += (s, e) => {
// Update data source (gauge updates automatically)
sensorData.Rows[0]["SensorValue"] = GetSensorReading();
};
dataTimer.Start();
// Apply consistent theme to all gauges
void ApplyTheme(Control.ControlCollection controls, ThemeStyle theme)
{
foreach (Control control in controls)
{
if (control is RadialGauge radial)
radial.VisualStyle = theme;
else if (control is LinearGauge linear)
linear.VisualStyle = theme;
else if (control is DigitalGauge digital)
digital.VisualStyle = theme;
if (control.HasChildren)
ApplyTheme(control.Controls, theme);
}
}
// Usage
ApplyTheme(this.Controls, ThemeStyle.Office2016Colorful);
| Need | Use This Gauge | Why |
|---|---|---|
| Circular display (speedometer style) | RadialGauge | Natural for rotary values, intuitive needle movement |
| Arc/partial circle | RadialGauge (HalfCircle/QuarterCircle) | Space-efficient, modern dashboard look |
| Horizontal progress bar | LinearGauge (Horizontal) | Clear left-to-right progression |
| Vertical level indicator | LinearGauge (Vertical) | Natural for height/depth/level visualization |
| Time display (LED style) | DigitalGauge (SevenSegment) | Classic digital clock appearance |
| Alphanumeric status code | DigitalGauge (FourteenSegment/SixteenSegment) | Supports letters and numbers |
| Multiple needles on one dial | RadialGauge (EnableCustomNeedles) | Compare multiple values on same scale |
| Fill-based progress indicator | RadialGauge (FrameType.Fill) | Visual fill from start to current value |
| Property | Type | Description |
|---|---|---|
Value | float (Radial/Linear) / string (Digital) | Current displayed value |
MinimumValue | float | Minimum scale value (Radial/Linear only) |
MaximumValue | float | Maximum scale value (Radial/Linear only) |
DataSource | object | Data source for binding |
DisplayMember | string | Column name for value binding |
DisplayRecordIndex | int | Row index for value binding |
| Property | Type | Description |
|---|---|---|
FrameType | FrameType | FullCircle, HalfCircle, QuarterCircle, Fill |
StartAngle | int | Starting angle of arc (degrees) |
SweepAngle | int | Arc span length (degrees) |
ShowNeedle | bool | Display pointer needle |
VisualStyle | ThemeStyle | Theme: Blue, Black, Silver, Metro, Office2016*, Custom |
NeedleStyle | NeedleStyle | Default, Advanced, Pointer |
EnableCustomNeedles | bool | Allow multiple needles |
Ranges | RangeCollection | Color-coded value ranges |
MajorDifference | float | Spacing between major ticks |
MinorDifference | float | Spacing between minor ticks |
| Property | Type | Description |
|---|---|---|
LinearFrameType | LinearFrameType | Horizontal or Vertical |
PointerPlacement | Placement | Top, Center, Bottom |
ShowNeedle | bool | Display pointer |
VisualStyle | ThemeStyle | Theme: Blue, Black, Silver, Metro, Office2016*, Custom |
Ranges | LinearRangeCollection | Color-coded value ranges |
MajorDifference | float | Spacing between major ticks |
MinorTickCount | int | Number of minor ticks between majors |
| Property | Type | Description |
|---|---|---|
Value | string | Text to display |
CharacterType | CharacterType | DotMatrix, SevenSegment, FourteenSegment, SixteenSegment |
CharacterCount | int | Number of characters to display |
SegmentSpacing | float | Spacing between characters |
ShowInvisibleSegments | bool | Show inactive segments |
RoundCornerRadius | int | Corner rounding radius |
Note: DigitalGauge does not support the VisualStyle property. Use ForeColor and BackColor for styling instead. |
Scenario: Monitor multiple sensors (pressure, temperature, RPM)
Solution: Multiple RadialGauges with color-coded ranges and real-time data binding
Scenario: Show task completion percentage
Solution: LinearGauge (Horizontal) or RadialGauge (Fill type) with 0-100 range
Scenario: Display current time in LED format
Solution: DigitalGauge with SevenSegment character type, timer for updates
Scenario: Speedometer, tachometer, fuel gauge
Solution: RadialGauges (HalfCircle for speed/RPM), LinearGauge (Vertical for fuel)
Scenario: CPU usage, memory, network speed
Solution: Mix of RadialGauges (percentage dials) and DigitalGauges (numeric readouts)
Scenario: Thermostat with visual temperature display
Solution: RadialGauge (FullCircle) with color ranges (blue=cold, yellow=moderate, red=hot)