How to create a Chart control example in C# WPF?

Description

This KB article explains how to create a simple chart using WPF SfChart control. The example includes setting up the chart's header, legend, axis, and series in a WPF application.

The user uide documentation helps you to acquire more knowledge on chart and its features. You can also refer to the Feature Tour site to get an overview on all the features in chart. The assembly required for creating the chart is manifested in this documentation.

Creating chart title

The title can be set by using the Header property of the chart.

[C#]

SfChart chart = new SfChart();
chart.Header = "Chart";

Creating axis for chart

The required types of axes can be set by using PrimaryAxis and SecondaryAxis properties as demonstrated in the following code snippet.

[C#]

CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.Header = "Name";
primaryAxis.FontSize = 14;
chart.PrimaryAxis = primaryAxis;
 
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Header = "Height(in cm)";
secondaryAxis.FontSize = 14;
chart.SecondaryAxis = secondaryAxis;

To know more about various types of axis supported by chart, refer to this chart axis documentation.

Adding series

Add the required type of series to the chart and set the populated data collection to the series using the ItemsSource property of the chart series. Then, map the XBindingPath and YBindingPath properties of chart series to the required properties in the model to retrieve the data from the model and render the chart.

[C#]

ColumnSeries columnSeries = new ColumnSeries();
columnSeries.XBindingPath = "Name";
columnSeries.YBindingPath = "Height";
columnSeries.ItemsSource = (chart.DataContext as ViewModel).Data;
columnSeries.Label = "Height";
chart.Series.Add(columnSeries);

The various types of series supported by the chart are Cartesian, accumulation, financial, stacking, range, and circular and its sub types are discussed in the following series documentation.

Populating data for chart series

Generate the required Model and ViewModel to bind the data point for the chart. The following code snippet demonstrates a simple data model that represents a data point and create the view model for data.

[C#]

public class Person
{
    public string Name { get; set; }
 
    public double Height { get; set; }
}
 
public class ViewModel
{
    public List<Person> Data { get; set; }
 
    public ViewModel()
    {
        Data = new List<Person>()
        {
            new Person { Name = "David", Height = 180 },
            new Person { Name = "Michael", Height = 170 },
            new Person { Name = "Steve", Height = 160 },
            new Person { Name = "Joel", Height = 182 },
        };
    }
}

Set the ViewModel instance as the DataContext for the chart or your window; this is done to bind properties of ViewModel to chart.

[C#]

chart.DataContext = new ViewModel();

The various types of data binding supported by chart can be found in this documentation.

Adding legend

The legend can be added by using the Legend property of the chart. The following code snippet shows how to add legend for the chart.

[C#]

chart.Legend = new ChartLegend();

In addition, you need to set label for each series using Label property of ChartSeries, which will be displayed in corresponding legend item.

[C#]

columnSeries.Label = "Height";

To know more about legend and its customizations, refer to the legend documentation.

The following code snippet gives you the consolidated configuration of all the above codes in creating a simple chart.

[C#]

SfChart chart = new SfChart();
 
// Setting header for the SfChart.
chart.Header = "Chart";
 
// Setting DataContext for SfChart.
chart.DataContext = new ViewModel();
 
// Adding Legend to the SfChart.
chart.Legend = new ChartLegend();
 
// Initialize the horizontal axis for SfChart.
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.Header = "Name";
primaryAxis.FontSize = 14;
chart.PrimaryAxis = primaryAxis;
 
// Initialize the vertical axis for SfChart.
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.Header = "Height(in cm)";
secondaryAxis.FontSize = 14;
chart.SecondaryAxis = secondaryAxis;
 
// Initialize the series for SfChart.
ColumnSeries columnSeries = new ColumnSeries();
columnSeries.XBindingPath = "Name";
columnSeries.YBindingPath = "Height";
columnSeries.ItemsSource = (chart.DataContext as ViewModel).Data;
columnSeries.Label = "Height";
chart.Series.Add(columnSeries);

Refer to the complete GitHub sample here.

Output

Take a moment to review the documentation, where you'll find a detailed explanation of chart creation. Refer here to explore the interactive features available in the chart.

See also

How to create chart in WPF application using XAML

How to create pie chart in C# WPF

How to create chart in VB .NET WPF

How to create chart in VB .NET Windows Forms

How to create chart in Xamarin.Forms