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;
    }
}

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