How to create Chart in F# WPF?
This document provides a step-by-step guide on how to create a SfChart in a WPF application using F#. The example will follow the MVVM Pattern to display an expense report.
Step 1: Create the Model Define a simple Expense model in F# with fields for XValue and YValue.
namespace FSharpWpfMvvmTemplate.Model
type ExpenseReport =
{
XValue : string
YValue : string
}
Step 2: Populate the Model in a Repository Set up a repository to populate the properties of the Expense model.
namespace FSharpWpfMvvmTemplate.Repository
open FSharpWpfMvvmTemplate.Model
type ExpenseReportRepository() =
member x.GetAll() =
seq{
yield {XValue="Adidas"
YValue="10"
}
yield {XValue="Niki"
YValue="30"
}
yield {XValue="Reebok"
YValue="40"
}
yield {XValue="Fila"
YValue="20"
}
yield {XValue="Puma"
YValue="15"
}
}
Step 3: Create the ViewModel Inherit from a C# ViewModelBase class to provide the repository as an ObservableCollection.
type ExpenseItHomeViewModel(expenseReportRepository : ExpenseReportRepository) = inherit ViewModelBase() new () = ExpenseItHomeViewModel(ExpenseReportRepository()) member x.ExpenseReports = new ObservableCollection<ExpenseReport>( expenseReportRepository.GetAll())
Step 4: Create and add a SfChart to UserControl. Set the Binding to ItemSource, XBindingPath and YBindingPath properties of series, respectively.
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ViewModel="clr-
namespace:FSharpWpfMvvmTemplate.ViewModel;assembly=App"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:chart="clr-
namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
d:DesignWidth="424">
<UserControl.DataContext>
<ViewModel:ExpenseItHomeViewModel/>
</UserControl.DataContext>
<Grid>
<chart:SfChart Margin="10" >
<chart:SfChart.Header>
<TextBlock Text="Sneakers Sold by Brand for three months" FontSize="16"
FontWeight="Bold"/>
</chart:SfChart.Header>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis Header="Brand"/>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis Maximum="50" Header="Number of items sold(in %)"/>
</chart:SfChart.SecondaryAxis>
<chart:ColumnSeries Palette="Metro" ItemsSource="{Binding ExpenseReports}"
XBindingPath="XValue" YBindingPath="YValue"/>
</chart:SfChart>
</Grid>
</UserControl>
Step 5: Integrate UserControl in MainWindow Add the UserControl with SfChart into MainWindow.xaml using a Frame.
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="ExpenseIt" Height="450" Width="500"> <Frame Source="ExpenseItHome.xaml" /> </Window>
Output
For a detailed view, explore the sample on GitHub.
See also
How to create chart in VB net WPF
How to create a chart control in WPF application using XAML
Conclusion
I hope you enjoyed learning how to create Chart in F# WPF.
You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.
For current customers, you can check out our 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 other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
