How to create a chart control in WPF application using XAML?
The XAM Chart control is optimized to visualize a large amount of data elegantly. The User Guide documentation helps you acquire more knowledge on WPF 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 a 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 the 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 to the chart.
<chart:SfChart.Legend> <chart:ChartLegend/> </chart:SfChart.Legend>
In addition, you need to set a 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
