Winforms-chart-getting-started

This sample demonstrates how to create and customize a Syncfusion® WinForms Chart control.

Prerequisites

• Visual Studio 2022 or later
• .NET 10.0 or later
• Syncfusion® Syncfusion.Chart.Windows NuGet package

Assembly Deployment

To use the Chart control, add the Syncfusion.Chart.Windows NuGet package to your project.

Open the Package Manager Console and run:

Install-Package Syncfusion.Chart.Windows

Or, add the reference directly in your .csproj file:

<ItemGroup>
    <PackageReference Include="Syncfusion.Chart.Windows" Version="*" />
</ItemGroup>

Adding Chart to the Form

Step 1: Create a Windows Forms Application

Open Visual Studio, create a new Windows Forms App project targeting .NET 10.0.

Step 2: Create a Data Model

Create a data model class to represent the data points for the chart:

public class SalesData
{
    private string year;
    private double sales;

    public string Year
    {
        get { return year; }
        set { year = value; }
    }
    
    public double Sales
    {
        get { return sales; }
        set { sales = value; }
    }

    public SalesData(string year, double sales)
    {
        this.year = year;
        this.sales = sales;
    }
}

Features and benefits

Chart types

The WinForms Chart control includes a comprehensive set of more than 30 chart types for all your business needs. Each one is highly and easily configurable with built-in support for creating stunning visual effects.

Chart real-time data

The Chart control can efficiently handle real-time data as illustrated in the following screenshots. Updates are optimized to be smooth and flicker-free.

Template support

Save time by persisting the appearance of a chart created at design time or runtime as a template. Apply the saved style to a new chart by loading the template.

Zooming and scrolling

Enable the built-in zooming and scrolling features of a chart to provide users with great chart flexibility.

Panning support for zoomed chart

WinForms Graph supports panning a chart when it is zoomed. You can navigate to parts of the chart outside of the viewing area by simply clicking and dragging.

Axis label binding

Bind axis labels to pie, funnel, and pyramid charts. This feature displays data-bound labels in charts.

LINQ support

Use LINQ to create varied, concise, and optimal views of your data. Bind to LINQ query results and view your data using many different chart types. Binding a LINQ query result to a chart and the resultant display are illustrated here.

Excel importing and exporting

The WinForms Graph control can be used with the Syncfusion Excel Library to import data from Excel documents into a chart. Simpler Excel data can, of course, be loaded using the Microsoft Jet OLEDB data provider.

3D Mode

The Windows Forms Chart control supports 3D modes for all chart types except polar and radar charts.

Color palette

The Chart comes with a set of color palettes that are automatically applied to a chart's data points if no custom colors are specified for the series. These built-in palettes offer a rich set of colors to render professional-looking charts.

Related links

Learn More about WinForms Chart Control

Download Free Trial

Pricing

Documentation

View Demos

Community Forums

Suggest a feature or report a bug

About Syncfusion WinForms UI Controls

Syncfusion's WinForms UI Controls library is the only suite that you will ever need to build an application since it contains over 130 high-performance, lightweight, modular, and responsive UI Controls in a single package. In addition to Chart, we provide popular WinForms Controls such as DataGrid, Chart, Pivot Grid, and AI AssitView.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 38,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ components and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, JavaScript, and MAUI(Preview)), and desktop development (WinForms, WPF, WinUI, Flutter, UWP, and MAUI(Preview)). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license, you can purchase one here or start a free 30-day trial here.

---

sales@syncfusion.com | www.syncfusion.com | 1-888-9 DOTNET

### Step 3: Add the Chart Control

In the Form1.Designer.cs (or code-behind), initialize and configure the ChartControl:

using Syncfusion.Drawing;
using Syncfusion.Windows.Forms.Chart;
using System.ComponentModel;

// Initialize the ChartControl
this.chartControl1 = new Syncfusion.Windows.Forms.Chart.ChartControl();

// Set chart appearance
this.chartControl1.ChartArea.BackInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.Transparent);
this.chartControl1.ChartArea.CursorLocation = new System.Drawing.Point(0, 0);
this.chartControl1.ChartArea.CursorReDraw = false;
this.chartControl1.DataSourceName = "[none]";
this.chartControl1.IsWindowLess = false;
this.chartControl1.TabIndex = 0;
this.chartControl1.Skins = Skins.Metro;

// Set PrimaryXAxis properties
this.chartControl1.PrimaryXAxis.ValueType = ChartValueType.Category;
this.chartControl1.PrimaryXAxis.TitleColor = System.Drawing.SystemColors.ControlText;

// Create data source
BindingList<SalesData> dataSource = new BindingList<SalesData>();
dataSource.Add(new SalesData("1999", 3));
dataSource.Add(new SalesData("2000", 7));
dataSource.Add(new SalesData("2001", 12));
dataSource.Add(new SalesData("2002", 18));
dataSource.Add(new SalesData("2003", 22));
dataSource.Add(new SalesData("2004", 30));
dataSource.Add(new SalesData("2005", 40));
dataSource.Add(new SalesData("2006", 50));
dataSource.Add(new SalesData("2007", 65));
dataSource.Add(new SalesData("2008", 75));

// Create data binding model
CategoryAxisDataBindModel dataSeriesModel = new CategoryAxisDataBindModel(dataSource);
dataSeriesModel.CategoryName = "Year";
dataSeriesModel.YNames = new string[] { "Sales" };

// Create chart series
ChartSeries chartSeries = new ChartSeries("Sales");
chartSeries.CategoryModel = dataSeriesModel;
chartSeries.Style.DisplayText = true;
chartSeries.Style.TextOrientation = ChartTextOrientation.Up;

// Configure legend
this.chartControl1.Legend.Visible = true;
this.chartControl1.LegendAlignment = ChartAlignment.Center;
this.chartControl1.Legend.Position = ChartDock.Top;
this.chartControl1.LegendsPlacement = ChartPlacement.Outside;

// Add series to chart
this.chartControl1.Series.Add(chartSeries);

// Enable tooltips
this.chartControl1.ShowToolTips = true;
this.chartControl1.Tooltip.BackgroundColor = new BrushInfo(Color.White);
this.chartControl1.Tooltip.BorderStyle = BorderStyle.FixedSingle;
this.chartControl1.Tooltip.Font = new Font("Segoe UI", 10);
chartSeries.PointsToolTipFormat = "{2}";

// Set size and add to form
this.chartControl1.Size = new System.Drawing.Size(1500, 450);
this.AutoScaleDimensions = new System.Drawing.SizeF(9F, 20F);
this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
this.ClientSize = new System.Drawing.Size(821, 577);

panel.AutoSize = true;
panel.Controls.Add(chartControl1);

this.Controls.Add(panel);
this.Name = "Form1";
this.Text = "Form1";

Customizing Chart Appearance

The appearance of the chart can be customized using various properties. In the example above, we applied the Metro skin:

this.chartControl1.Skins = Skins.Metro;

Enabling Data Labels

Data labels can be enabled to show values directly on the chart:

chartSeries.Style.DisplayText = true;
chartSeries.Style.TextOrientation = ChartTextOrientation.Up;

Enabling Tooltips

Tooltips provide detailed information about data points when hovering over them:

this.chartControl1.ShowToolTips = true;
this.chartControl1.Tooltip.BackgroundColor = new BrushInfo(Color.White);
this.chartControl1.Tooltip.BorderStyle = BorderStyle.FixedSingle;
this.chartControl1.Tooltip.Font = new Font("Segoe UI", 10);
chartSeries.PointsToolTipFormat = "{2}";

Running the Sample

1. Clone or download this repository.
2. Open GettingStarted_Chart.slnx in Visual Studio.
3. Restore NuGet packages.
4. Build and run the project (F5).

References

• Syncfusion WinForms Chart Documentation
• Syncfusion WinForms Chart API Reference