Getting Started with Windows Forms Chart

18 Nov 201813 minutes to read

This section explains the steps required to populate the Windows Forms Chart control with data and configure a title, data labels, a legend, tooltips, and a built-in skin. This section covers only the minimal features that you need to learn to get started with the chart.

Add chart reference

Refer to the Control Dependencies section to learn about the assemblies or NuGet packages required to use the Chart control in a Windows Forms application.

For information about installing NuGet packages, refer to Install NuGet packages in a Windows Forms application.

Creating application with chart control

This section explains how to add the chart control through the designer and code.

Adding control via designer

The chart control can be added through the designer by following the given steps:

Step 1: Create a new Windows Forms Application in Visual Studio.

Step 2: Drag and drop the ChartControl from the toolbox into the designer page.

Step 3: After dropping the chart, the ChartWizard will be opened. You can set up the chart configuration during design-time.

Step 4: The appearance and behavior of the chart can be controlled by setting the appropriate properties in the Properties window.

For example, align the legend at the top by changing the LegendPosition property.

Adding control via code

To add the chart control manually in C#, follow the given steps:

Step 1: Create a new Windows Forms Application in Visual Studio.

Step 2: Add the following required assembly references to the project:

• Syncfusion.Chart.Windows.dll
• Syncfusion.Chart.Base.dll
• Syncfusion.Chart.Windows
• Syncfusion.Shared.Base

Step 3: Include the namespace Syncfusion.Windows.Forms.Chart.

C#

using Syncfusion.Windows.Forms.Chart;

VB.NET

Imports Syncfusion.Windows.Forms.Chart

Step 4: Create the ChartControl control instance and add it to the form.

C#

ChartControl chartControl = new ChartControl();
chartControl.Dock = DockStyle.Fill;
this.Controls.Add(chartControl);

VB.NET

Dim chartControl As ChartControl = New ChartControl
chartControl.Dock = DockStyle.Fill
Me.Controls.Add(chartControl)

Populate chart with data

This section visualizes product sales data using a BindingList.

Define a data model

Define a data model that represents a sales data point.

C#

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

VB.NET

Public Class SalesData

    Private xValue As String
    Private yValue As Double

    Public Property Year As String
        Get
            Return xValue
        End Get
        Set(ByVal value As String)
            xValue = value
        End Set
    End Property

    Public Property Sales As Double
        Get
            Return yValue
        End Get
        Set(ByVal value As Double)
            yValue = value
        End Set
    End Property

    Public Sub New(ByVal year As String, ByVal sales As Double)
        Me.Year = year
        Me.Sales = sales
    End Sub

End Class

Create a data source

Create a BindingList and populate it with instances of the SalesData model.

C#

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

VB.NET

Dim dataSource As New BindingList(Of 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 the data binding model

Create a CategoryAxisDataBindModel using the data source. Use the CategoryName and YNames properties to map the category and Y-value fields.

C#

CategoryAxisDataBindModel dataSeriesModel = new CategoryAxisDataBindModel(dataSource);
dataSeriesModel.CategoryName = "Year";
dataSeriesModel.YNames = new string[] { "Sales" };

VB.NET

Dim dataSeriesModel As New CategoryAxisDataBindModel(dataSource)
dataSeriesModel.CategoryName = "Year"
dataSeriesModel.YNames = New String() {"Sales"}

Bind the data to the chart series

Create a ChartSeries and assign the data-binding model to its CategoryModel property. Then, add the series to the chart.

C#

ChartSeries chartSeries = new ChartSeries("Sales");
chartSeries.CategoryModel = dataSeriesModel;
chartControl.Series.Add(chartSeries);

VB.NET

Dim chartSeries As New ChartSeries("Sales")
chartSeries.CategoryModel = dataSeriesModel
chartControl.Series.Add(chartSeries)

Configure the category axis

To display categorical data, set the ValueType property of the PrimaryXAxis to Category.
You can also define titles for the primary X and Y axes by using their Title properties.

C#

chartControl.PrimaryXAxis.ValueType = ChartValueType.Category;
chartControl.PrimaryXAxis.Title = "Year";
chartControl.PrimaryYAxis.Title = "Sales(Millions)";

VB.NET

chartControl.PrimaryXAxis.ValueType = ChartValueType.Category
chartControl.PrimaryXAxis.Title = "Year"
chartControl.PrimaryYAxis.Title = "Sales(Millions)"

Apply a skin to the chart control

To improve the appearance of the chart, apply the Metro skin to the ChartControl as follows.

C#

chartControl.Skins = Skins.Metro;

VB.NET

chartControl.Skins = Skins.Metro

The following screenshot depicts the view when you run the project in your form.

Add chart title

A title provides users with quick information about the data plotted in the chart. You can add a title to the chart by using the Text property of ChartTitle.

C#

ChartTitle title = new ChartTitle();
title.Text = "Product Sales";
chartControl.Titles.Add(title);

VB.NET

Dim title As ChartTitle = New ChartTitle()
title.Text = "Product Sales"
chartControl.Titles.Add(title)

Enable legend

The Legend is enabled or disabled by using the Visible property. By default, the legend is enabled in the chart.

C#

ChartSeries chartSeries = new ChartSeries("Sales");
chartControl.Legend.Visible = true;
chartControl.LegendAlignment = ChartAlignment.Center;
chartControl.Legend.Position = ChartDock.Top; 
chartControl.LegendsPlacement = ChartPlacement.Outside;

VB.NET

Dim chartSeries As ChartSeries = New ChartSeries("Sales")
chartControl.Legend.Visible = true
chartControl.LegendAlignment = ChartAlignment.Center
chartControl.Legend.Position = ChartDock.Top
chartControl.LegendsPlacement = ChartPlacement.Outside

Enable data labels

You can add data labels to the chart to improve readability by enabling the DisplayText property of the Style in ChartSeries.

C#

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

VB.NET

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

Enable tooltip

Tooltip is used to show detailed information about a data point. You can enable tooltip by using the ShowToolTips property.

C#

chartControl.ShowToolTips = true;
chartControl.Tooltip.BackgroundColor = new BrushInfo(Color.White);
chartControl.Tooltip.BorderStyle = BorderStyle.FixedSingle;
chartControl.Tooltip.Font = new Font("Segoe UI", 10);
chartSeries.PrepareStyle += ChartSeries_PrepareStyle;

private void ChartSeries_PrepareStyle(object sender, ChartPrepareStyleInfoEventArgs args)
{
     ChartSeries series = sender as ChartSeries;
     int index = args.Index;
     ChartPoint point = series.Points[index];
     args.Style.ToolTip = "Product : " + point.Category + "\nSales : " + point.YValues[0];
	 args.Handled = true;
}

VB.NET

chartControl.ShowToolTips = True
chartControl.Tooltip.BackgroundColor = New BrushInfo(Color.White)
chartControl.Tooltip.BorderStyle = BorderStyle.FixedSingle
chartControl.Tooltip.Font = New Font("Segoe UI", 10)
AddHandler chartSeries.PrepareStyle, AddressOf ChartSeries_PrepareStyle

Private Sub ChartSeries_PrepareStyle(ByVal sender As Object, ByVal args As ChartPrepareStyleInfoEventArgs)
    Dim series As ChartSeries = CType(sender, ChartSeries)
    Dim index As Integer = args.Index
    Dim point As ChartPoint = series.Points(index)
    args.Style.ToolTip = "Product : " & point.Category & vbLf & "Sales : " & point.YValues(0)
    args.Handled = True
End Sub

See also

• Binding a DataSet to a Chart
• Tasks Window
• How to host WPF Chart control in Windows Forms project
• How to create a chart in VB .NET Windows Forms
• How to create a real-time chart in WF
• How to add data to the Chart control in WinForms Chart
• How to specify a chart type in Syncfusion Winforms Chart control

You can find the complete getting started sample from this link.

You can also explore our WinForms Chart example that shows how to render various chart types as well as how to easily configure with built-in support for creating stunning visual effects.