How to create a chart control in WPF application using XAML?

The XAML Chart control is optimized to visualize a large amount of data in an elegant way. The User Guide Documentation helps you to acquire more knowledge on chart and its features. The assembly required for creating the chart is manifested in this documentation.

This KB article explains how to create a simple chart with header, legend, axis, and series in WPF using XAML.

Creating chart title

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

<chart:SfChart Header="Chart">
 …
</chart:SfChart>

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.

<chart:SfChart.PrimaryAxis>
    <chart:CategoryAxis Header="Name" FontSize="14"/>
</chart:SfChart.PrimaryAxis>
 
<chart:SfChart.SecondaryAxis>
    <chart:NumericalAxis Header="Height(in cm)" FontSize="14"/>
</chart:SfChart.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.

<chart:ColumnSeries XBindingPath="Name" 
                    YBindingPath="Height" 
                    ItemsSource="{Binding Data}" />

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

The required Model and ViewModel are generated 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.

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.

<chart:SfChart.DataContext>
    <local:ViewModel/>
</chart:SfChart.DataContext>

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.

<chart:SfChart.Legend>
    <chart:ChartLegend/>
</chart:SfChart.Legend> 

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

<chart:ColumnSeries XBindingPath="Name" 
                    YBindingPath="Height" 
                    ItemsSource="{Binding Data}" 
                    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.

Code snippet

<chart:SfChart Header="Chart">
 
    <!--Setting DataContext for SfChart-->
    <chart:SfChart.DataContext>
        <local:ViewModel/>
    </chart:SfChart.DataContext>
 
    <!--Adding Legend to the SfChart-->
    <chart:SfChart.Legend>
        <chart:ChartLegend/>
    </chart:SfChart.Legend>
 
    <!--Initializing the horizontal axis for SfChart-->
    <chart:SfChart.PrimaryAxis>
        <chart:CategoryAxis Header="Name" FontSize="14"/>
    </chart:SfChart.PrimaryAxis>
 
    <!--Initializing the vertical axis for SfChart-->
    <chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis Header="Height(in cm)" FontSize="14"/>
    </chart:SfChart.SecondaryAxis>
 
    <!--Initializing the series for SfChart-->
    <chart:ColumnSeries XBindingPath="Name" YBindingPath="Height" 
                        ItemsSource="{Binding Data}" Label="Height"/>
 
</chart:SfChart>

Output

Conclusion

I hope you enjoyed learning about the how to create a simple chart in XAML. You can refer to our XAML Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our XAML Chart example to understand how to present and manipulate data. 

For current customers, you can check out our WPF components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Charts in XAML and other WPF components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!