We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to create Chart in F# WPF?

Platform: WPF |
Control: SfChart

This article describes how to create a SfChart in WPF using the F#.

Let us see the simple example of displaying expense report in WPF chart using the F# (MVVM Pattern) by following these steps:

Step 1: Create a model F# code for a simple Expense model with fields for XValue and YValue.

namespace FSharpWpfMvvmTemplate.Model
 
type ExpenseReport =
    { 
 XValue : string
       YValue : string
      }

 

Step 2: Populate the Expense model properties in Repository.

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: Inheriting from a C# ViewModelBase class, which give the Repository as 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: Add UserControl with SfChart in the MainWindow.xaml using the 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>

 

Create SfChart using F#

You can download complete sample in this GitHub Location.

 

See also

How to create chart in VB net WPF

How to create chart in c WPF

How to create a chart control in WPF application using XAML

 

 

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile