DEV Community

Cover image for The Definitive Guide to WinForms Chart Controls
Chelsea Devereaux for MESCIUS inc.

Posted on • Originally published at Medium

The Definitive Guide to WinForms Chart Controls

A chart is a graphical representation of data, and a WinForms chart control is a reusable UI library for visualizing your data in a custom Windows desktop application. Visualizing data through charts provides insight into your data by helping your users uncover patterns and trends.

WeatherChart

In this article, we share the history of WinForms chart controls for developing .NET applications, the types of charts that can be created, top charting features, and how to work with a chart control in a .NET Windows Forms application.

History of WinForms Chart Controls

Microsoft designed the .NET platform to be extensible so that developers could further extend their applications. The .NET Developer Ecosystem not only allows you to fully customize whatever you need but also gives you the platform to sell and license your work. This architecture created opportunities for companies to develop more powerful controls than those in the .NET core libraries. This enables companies to find the exact component to solve their needs while saving time without having to “reinvent the wheel.”

Charts were long excluded from the basic set of UI controls provided by .NET and its predecessor, Visual Basic. Therefore, charting components became a key entry point for many third-party component vendors and buyers.

That changed with .NET 3.5 when Microsoft finally included a chart component in .NET framework. To achieve this, Microsoft acquired Dundas Data Visualization and incorporated a basic version of their chart into .NET Framework. The initial .NET chart component for Windows Forms and ASP.NET Web Forms was based on the Dundas Chart control. The WinForms chart component lives under the System.Windows.Forms.DataVisualization.Charting namespace.

Windows Forms Chart

The System.Windows.Forms.DataVisualization Chart control is still supported in the latest version of .NET Framework (4.8), though its feature set remains limited compared to most third-party controls. It’s also not supported in the newer versions of .NET that started with .NET 5 up to version 8. The ASP.NET version lives under System.Web.UI.DataVisualization, but we will not focus on that version in this article.

Third-party WinForms chart controls are designed to provide most (if not all) charting features a software application may require. They fill the gaps left by the .NET chart control and support a lot more advanced and niche features that some applications may require. Plus, third-party chart controls will support .NET 8 and beyond.

For example, the third-party ComponentOne FlexChart control provides common features similar to the .NET Chart control but offers many more chart types for business, statistics, and finance applications. You can find more licensed and free controls on sites like NuGet and GitHub.

ComponentOne FlexChart

Next, we’ll review the common chart types supported in the Windows Forms Chart control versus third-party chart controls.

Top WinForms Chart Types

Since charts are a data visualization tool, we will first define a chart by its visual characteristics, such as its type. We’re all familiar with bar charts, line charts, pie charts, etc.

Below is a table of other common chart types supported by the .NET Windows Forms Chart compared to a third-party chart control, such as FlexChart.

WinForms chart types

FlexChart chart types

Additionally, there are other types of charts that you can create that are essentially different forms of these common charts. For example, a tornado chart is a specific bar chart that could be customized. A vertical line chart is a line chart with the axes flipped. A streamgraph chart is a particular type of stacked area chart. For more details, check out our previous article, The Complete Guide to 80+ C# .NET Chart Types.

Statistical Chart Types
Third-party WinForms chart controls are more likely to support advanced chart types with very specific use cases. These charts may be used for statistics in a scientific or mathematical application.

Below is a table of other statistical chart types supported by the .NET Windows Forms Chart compared to the FlexChart control.

Statistical chart types

FlexChart Statistical

Financial Chart Types
Another large focus for charting is among finance applications. Finance and stock charts often use specialized visualizations in addition to standard line and bar charts.

Below is a table of other financial chart types supported by the .NET Windows Forms Chart compared to the third-party ComponentOne Financial Chart control.

Financial chart types

FlexChart Financial

For even more chart types available through third-party WinForms chart controls, check out our previous article, The Complete Guide to 80+ C# .NET Chart Types.

Top WinForms Chart Control Features

In addition to chart types, we can customize our charts with features. Features may help emphasize and visualize our data or make the data more accessible to users. Basic features of all charts include X and Y axes, gridlines, titles, and legends that are automatically generated. These features are pretty standard.

Below, we’ll examine more of the top WinForms chart control features supported by FlexChart and note which features can also be implemented with the standard .NET chart.

Alarm Zones
Alarm Zones are colored regions of the plot area that sit behind the data points. These zones visualize thresholds where the data points fall, allowing for clearer understanding. Alarm zones are not supported by the System.Windows.Forms Chart control, however, they are supported by most third-party libraries.

Alarm Zones

Animation
Animation gives an edge to any application and enhances the user experience by bringing life to its otherwise static elements. Charts can animate data upon load or when the data changes. Animation is not supported by the .NET Windows Forms chart. However, FlexChart supports simple animations on load and update.

Animation

Annotations
Annotations improve the clarity of the chart using arbitrary text, images, and shapes that can be attached to data points or plot coordinates. You can even allow end-users to edit annotations in FlexChart. Annotations are supported by the .NET Chart control and most third-party libraries.

Annotations

Data Labels
Display precise chart values in labels attached to each data point. FlexChart can automatically display the formatted value or percentage within labels and tooltips. A good chart control will prevent data labels from overlapping so all data is visible. Data labels are an essential chart feature supported by most charting libraries.

Data labels

Drill-Down & Selection
Selecting a data point or series in the chart allows the application to drill down and further analyze that slice of data. A good chart control has a flexible hit-testing API for extensible customization. A great chart control also has touch support for modern applications. Few charting libraries support this feature completely built-in (requiring no code); however, most can achieve the feature with some coding.

Drill down

Fast, High-Performance Rendering
For the fastest performance when working with large data sets, you want a WinForms chart control that supports DirectX rendering (and WebGL rendering in the browser). The .NET Chart control supports fast rendering for just Line and Point chart types, whereas the FlexChart supports it for all chart types.

Scatter

Interactive Line Markers
Line markers are horizontal or vertical lines on the chart bound to some value on an axis. They may display a label to show the exact data values and are generally used for precise insight or highlighting an important value or threshold on the chart. This feature is not supported out-of-the-box with the .NET Data Visualization Charting library, but it is a built-in feature of FlexChart.

Line marker

Stacking Series
Stacked charts demonstrate the part-to-whole relationship for displaying the cumulative values of each series. There are three different stacking features: normal stacking, 100% stacking, and grouped stacking. The .NET Chart control supports normal and 100% stacking for just Area, Line, and Bar charts. FlexChart provides options to stack most chart types and supports grouped stacking for bar charts. Grouped stacking allows for partial stacking only within specified groups.

Stacking series

Zooming & Scrolling
Zooming in charts allows users to select the area they want to enlarge by clicking and dragging the mouse, enabling them to analyze the data-packed charts at a granular level. The .NET Windows Forms Chart control supports axis scaling and zooming.

Zooming

Advanced zooming scenarios may include a separate range selector along either axis that lets the user “zoom in” and define a section of the axis in which they’re interested. FlexChart supports this zooming technique.

Candle stick

How to Add WinForms Chart Controls to a .NET Application

Follow the steps below to start using the ComponentOne FlexChart control in a new .NET 8 WinForms application. Unfortunately, the .NET Chart is not supported in .NET 8, but you can still use it to maintain .NET Framework applications (up to 4.8).

Step 1: Setup the Application
To begin building a .NET WinForms application, you must first install Visual Studio with .NET tools.

Create a new project using the “Windows Forms App” project template for C# and select .NET 8 on the subsequent window.

New project

Step 2: Add the Chart Control to the Application

  • Open the Form1.cs file in design view and expand the Toolbox window
  • Open the NuGet Package Manager from the Tools menu and select Manage NuGet Packages for Solution…
  • On the Browse tab, search for C1.Win.FlexChart
  • Select the project on the right and install the latest version from NuGet.org

NuGet

  • Drag and drop the FlexChart control from the Toolbox to the design form
  • With the control selected, open the smart tag (>) and observe the different features you can quickly customize, including the chart type, stacking, rotated axes, and color palette
  • Click Dock in Parent Container to quickly customize, including the chart type, stacking, rotated axes, and color palette
  • Click Dock in Parent Container to fill the entire form with the chart

Design time

Notice the chart is populated with some design-time dummy data. Next, we will create our own data source.

Step 3: Configure the Data Source
To visualize our business data, we need to set up a sample data source. You can use the sample code below by replacing the Form1 class in the Form1.cs file.

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();

        var salesdata = new List<Sales>();
        salesdata.Add(new Sales() { Quarter = "Q1", Revenue = 2500, Cost=1200 });
        salesdata.Add(new Sales() { Quarter = "Q2", Revenue = 2750, Cost=850 });
        salesdata.Add(new Sales() { Quarter = "Q3", Revenue = 3185, Cost=643 });
        salesdata.Add(new Sales() { Quarter = "Q4", Revenue = 3444, Cost=601 });
        // bind the chart
        flexChart1.DataSource = salesdata;
        flexChart1.Binding = "Revenue";
        flexChart1.BindingX = "Quarter";
    }
}

public class Sales
{
    public string Quarter { get; set; }
    public double Revenue { get; set; }
    public double Cost { get; set; }
}
Enter fullscreen mode Exit fullscreen mode

Observe the lines of code referring to FlexChart. To populate the FlexChart, you must:

  1. Set the DataSource property to your IEnumerable List, Collection, or DataTable
  2. Set the Binding property to the field plotted along the Y axes (i.e., Revenue)
  3. Set the BindingX property to the field plotted along the X axes (i.e., Quarter)

When we build and run the application, our chart looks like this:

Run application

Step 4: Visualize Multiple Series
The code above works for the simplest charts with a single series. When working with multiple series, you should define each series separately and set the unique Binding property for each series.

For example, let’s add a Line with Symbols series that displays our “Cost” values. Add the following code:

C1.Win.Chart.Series s2 = new C1.Win.Chart.Series();
s2.Binding = "Cost";
s2.ChartType = C1.Chart.ChartType.LineSymbols;
flexChart1.Series.Add(s2);
Enter fullscreen mode Exit fullscreen mode

Observe that we should share the single BindingX statement. We can use this process to add any number of different series to the chart!

Final chart

You can learn more about FlexChart and its features by visiting the developer’s documentation.

Most third-party libraries will work with a free 30-day trial. You may be prompted to visit the company’s website to start the trial, or it may be configured to work with just the NuGet package.

Conclusion

.NET WinForms Chart Controls are designed to be highly flexible, customizable, and reusable because no two charts are ever the same (well, you get the point). If you’re working with .NET Framework and building a Windows Forms application, you can get by by creating some simple charts using the Windows Forms Chart control.

One of the most significant drawbacks to using the .NET Windows Forms Chart control is that you can’t target the latest version of .NET. As of the time of this writing, it appears that Microsoft attempted to support the control in .NET Core as seen from the System.Windows.Forms.DataVisualization NuGet package release history. However, there hasn’t been any update in over four years, and the library is still marked as pre-release.

If you are targeting .NET 8 or higher and need more chart types or interactive features, you should upgrade to a third-party WinForms Chart control, such as FlexChart, to get the job done. While the standard .NET Chart just supports Windows Forms and ASP.NET, third-party charts support the entire .NET stack, including WPF, WinUI, MAUI, Blazor, and MVC. Plus, you’ll find other data visualization controls, including maps, sparklines, gauges, and Gantt charts.

Top comments (0)