Chart of the Week: Visualize the Transfer Spending and Earning among the Football League Clubs Using WPF Scatter Chart
Tags: wpf, chart, dekstop, data
Published: 2023-06-02 09:44:23

---
title: Chart of the Week: Visualize the Transfer Spending and Earning among the Football League Clubs Using WPF Scatter Chart
published: true
date: 2023-06-01 11:30:24 UTC
tags: wpf, chart, dekstop, data
canonical_url: https://www.syncfusion.com/blogs/post/visualize-transfer-spending-earning-wpf-scatter-chart.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgjx7vrrdnf7izah58f3.png
---
Welcome to our blog series, Chart of the Week!

Today, we will visualize the amount of money spent and earned on transfers by the five big European football league clubs since the summer of 2016. For this demonstration, we will use Syncfusion’s [WPF scatter chart](https://www.syncfusion.com/wpf-controls/charts/wpf-scatter-chart "WPF Scatter Chart") control.

The team with the highest positive balance in France was LOSC Lille (+€191M), having spent €252M and earned €443M. In England, Manchester City had the most negative balance (-€631M), having spent €1006M and earned €375M.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Visualizing-the-transfer-amount-spent-and-earned-among-the-European-football-league-clubs-using-WPF-1.png" alt="Visualizing the transfer amount spent and earned among the European football league clubs using WPF scatter chart" style="width:100%">

  <figcaption>Visualizing the transfer amount spent and earned among the European football league clubs using WPF scatter chart</figcaption>

</figure>
Let’s start constructing a football (soccer) transfer earning and spending chart using the Syncfusion [WPF scatter chart](https://www.syncfusion.com/wpf-controls/charts/wpf-scatter-chart "WPF Scatter Chart") control.

## Step 1: Collect data on football spending and earnings

Before creating a chart, let’s gather the data from the [CIES Football Observatory site](https://football-observatory.com/IMG/sites/b5wp/2020/wp324/en/ "CIES Football Observatory site"). We’re going to obtain the transfer spending and earning details for the big five football league clubs since the summer of 2016. You can also download the data as a separate JSON file.

## Step 2: Preparing the data for the chart

Create the **FootballMarket** class to hold the transfer spent and earned amounts, net amount in millions of euros, club names, and league code information.

Refer to the following code example for assistance.

```csharp
public class FootballMarket
{
    public double Club_tm { get; set; }
    public double Spent { get; set; }
    public string LeagueCode { get; set; }
    public string Club { get; set; }
    public double Earned { get; set; }
    public double Net { get; set; }
}
```

Next, generate a collection of net transfer spent and earned amounts using the **FootballRevenue** class and **PremierLeague** , **Liga** , **Ligue1** , **Bundesliga** , and **SerieA** properties.

```csharp
public class FootballRevenue
{
   private List<FootballMarket> premierLeague;
   public List<FootballMarket> PremierLeague
   {
       get { return premierLeague; }
       set
       {
           premierLeague = value;
       }
   }

   public List<FootballMarket> FlagCollection { get; set; }

   private List<FootballMarket> liga;
   public List<FootballMarket> Liga
   {
      get { return liga; }
      set
      {
         liga = value;
      }
   }
   
   private List<FootballMarket> ligue1;
   public List<FootballMarket> Ligue1
   {
       get { return ligue1; }
       set
       {
           ligue1 = value;
       }
   }
   
   private List<FootballMarket> bundesliga;
   public List<FootballMarket> Bundesliga
   {
       get { return bundesliga; }
       set
       {
           bundesliga = value;
       }
   }
   
   private List<FootballMarket> serieA;
   public List<FootballMarket> SerieA
   {
      get { return serieA; }
      set
      {
         serieA = value;
      }
    }
}
```

To convert the JSON data to a collection, use the **StreamReader** and **JsonConvert.DeserializeObject** methods and the [**NewtonSoft.Json**](https://www.nuget.org/packages/Newtonsoft.Json/ "Newtonsoft.Json NuGet Package") package. Then, store the converted data in the appropriate properties.

```csharp
public class FootballRevenue
{
  public FootballRevenue()
  {
      Assembly executingAssembly = typeof(App).GetTypeInfo().Assembly;
      using (var stream = executingAssembly.GetManifestResourceStream("FootballSpentEarned.Resources.data.json"))
      using (TextReader textStream = new StreamReader(stream))
      {
          var data = textStream.ReadToEnd();
          data = data.Trim();
          Data = JsonConvert.DeserializeObject<List<FootballMarket>>(data);
          PremierLeague = Data.Where(d => d.LeagueCode == "ENG").ToList();
          Bundesliga = Data.Where(d => d.LeagueCode == "GER").ToList();
          Liga = Data.Where(d => d.LeagueCode == "ESP").ToList();
          Ligue1 = Data.Where(d => d.LeagueCode == "FRA").ToList();
          SerieA = Data.Where(d => d.LeagueCode == "ITA").ToList();
      }
  }
}
```

## Step 3: Configure the Syncfusion WPF Charts control

Now, let’s configure the Syncfusion WPF Charts control using this [documentation](https://help.syncfusion.com/wpf/charts/getting-started "Getting started with WPF Charts").

Refer to the following code example.

```xml
<chart:SfChart >
 <chart:SfChart.PrimaryAxis>
  <chart:NumericalAxis> 
  </chart:NumericalAxis>
 </chart:SfChart.PrimaryAxis>
 <chart:SfChart.SecondaryAxis>
  <chart:NumericalAxis>
  </chart:NumericalAxis>
 </chart:SfChart.SecondaryAxis>
</chart:SfChart>

```

## Step 4: Bind football spending and earning data to the scatter chart

Bind the football league clubs’ spending and earning data using the [FastScatterBitmapSeries](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html?tabs=tabid-1 "FastScatterBitmapSeries class of WPF Scatter Chart") class. This class will allow you to render a collection with a large number of data points.

```xml
<chart:SfChart.Series>
 <chart:FastScatterBitmapSeries XBindingPath="Spent" YBindingPath="Earned" ItemsSource="{Binding PremierLeague}" />
 <chart:FastScatterBitmapSeries XBindingPath="Spent" YBindingPath="Earned" ItemsSource="{Binding Liga}" />
 <chart:FastScatterBitmapSeries XBindingPath="Spent" YBindingPath="Earned" ItemsSource="{Binding Ligue1}" />
 <chart:FastScatterBitmapSeries XBindingPath="Spent" YBindingPath="Earned" ItemsSource="{Binding Bundesliga}" />
 <chart:FastScatterBitmapSeries XBindingPath="Spent" YBindingPath="Earned" ItemsSource="{Binding SerieA}" />
</chart:SfChart.Series>

```

In this example, we’ve bound the scatter chart with the **PremierLeague** , **Liga** , **Ligue1** , **Bundesliga,** and **SerieA** properties, which contain the information of the football league clubs. Additionally, we’ve specified the **XBindingPath** and **YBindingPath** with the **Spent** and **Earned** properties, which inform the chart about the data points for the x- and y-axes.

## Step 5: Customize the header of the WPF scatter chart

The WPF scatter chart allows us to customize its appearance based on our requirements.

Let’s see how to add a title to the chart using the [Header](https://help.syncfusion.com/wpf/charts/header "Header in WPF Charts") property. Also, we’ll align the header using the [HorizontalHeaderAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_HorizontalHeaderAlignment "HorizontalHeaderAlignment property of WPF Scatter Chart") and [VerticalHeaderAlignment](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartBase.html#Syncfusion_UI_Xaml_Charts_ChartBase_VerticalHeaderAlignment "VerticalHeaderAlignment property of WPF Scatter Chart") properties.

```xml
<chart:SfChart x:Name="chart" Margin="10" HorizontalHeaderAlignment="Left">
 <chart:SfChart.Header>
  <Grid HorizontalAlignment="Left" Margin="5,0,0,10" VerticalAlignment="Center" >
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width="13"/>
    <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <StackPanel Orientation="Vertical" Background="Green" Margin="0,10,0,0" Grid.RowSpan="2"/>
   <StackPanel Margin="5,0,0,0" HorizontalAlignment="Left" Orientation="Vertical" Grid.Column="1" >
    <TextBlock Text="Football Transfer Spending" HorizontalAlignment="Left" TextWrapping="Wrap" FontSize="35" FontWeight="SemiBold" Foreground="Black"/>
    <TextBlock Text="Cumulative transfer spending and earning of clubs from European football since summer 2016" HorizontalAlignment="Left" FontSize="15" Foreground="Gray"/>
   </StackPanel>
  </Grid>
 </chart:SfChart.Header>
</chart:SfChart>
```

## Step 6: Customize the axis elements

We can customize the [chart axis’s header](https://help.syncfusion.com/wpf/charts/axis#header "WPF Chart axis’s header") using the [Header](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_Header "Header property of WPF Scatter Chart") property. Refer to the following code example.

```xml
<chart:SfChart.PrimaryAxis>
 <chart:NumericalAxis >
  <chart:NumericalAxis.Header>
    <TextBlock Text="Spending" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Helvetica" FontSize="15" FontWeight="SemiBold" Foreground="Black"/>
  </chart:NumericalAxis.Header>
 </chart:NumericalAxis>
</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis >
  <chart:NumericalAxis.Header>
   <TextBlock Text="Earning" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="15" Foreground="Black" FontFamily="Helvetica"/>
  </chart:NumericalAxis.Header>
 </chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
```

Then, let’s customize the axis line style, major tick line style, and axis label format and set the interval for the numerical axis using the [AxisLineStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_AxisLineStyle "AxisLineStyle property of WPF Scatter Chart"), [MajorTickLineStyle](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_MajorTickLineStyle "MajorTickLineStyle property of WPF Scatter Chart"), [LabelFormat](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_LabelFormat "LabelFormat property of WPF Scatter Chart"), and [Interval](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_Interval " Interval property of WPF Scatter Chart") properties, respectively.

We can also configure the position of the edge labels using the [EdgeLabelDrawingMode](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartAxis.html#Syncfusion_UI_Xaml_Charts_ChartAxis_EdgeLabelsDrawingMode "EdgeLabelDrawingMode property of WPF Scatter Chart") property and add padding to the y-axis by setting the [Normal](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalPadding.html "Enum NumericalPadding Field of WPF Scatter Chart") value to the [RangePadding](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.NumericalAxis.html#Syncfusion_UI_Xaml_Charts_NumericalAxis_RangePadding "RangePadding property of WPF Scatter Chart") property.

```xml
<chart:SfChart.PrimaryAxis>
 <chart:NumericalAxis Interval="250" AxisLineStyle="{StaticResource lineStyle}" MajorTickLineStyle="{StaticResource lineStyle}" RangePadding="Normal" Foreground="Black" FontWeight="Normal" EdgeLabelsDrawingMode="Shift" LabelFormat="#,0'M€" >
 </chart:NumericalAxis>
</chart:SfChart.PrimaryAxis>

<chart:SfChart.SecondaryAxis>
 <chart:NumericalAxis Interval="250" AxisLineStyle="{StaticResource lineStyle}" MajorTickLineStyle="{StaticResource lineStyle}" FontWeight="Normal" Foreground="Black" LabelFormat="#,0'M€">
 </chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
```

## Step 7: Customize the scatter points in the chart

Refer to the following code example to customize the chart’s scatter points using the [ShapeType](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ShapeType "ShapeType property of WPF Scatter Chart"), [Interior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior "Interior property of WPF Scatter Chart"), [ScatterHeight](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ScatterHeight " ScatterHeight property of WPF Scatter Chart"), [ScatterWidth](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.FastScatterBitmapSeries.html#Syncfusion_UI_Xaml_Charts_FastScatterBitmapSeries_ScatterWidth "ScatterWidth property of WPF Scatter Chart"), and [Label](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Label "Label property of WPF Scatter Chart") properties.

```xml
<chart:SfChart.Series>
 <chart:FastScatterBitmapSeries XBindingPath="Spent" Interior="#d61111" Label="PremierLeague (England)" ScatterWidth="10" ShapeType="Square" YBindingPath="Earned" ItemsSource="{Binding PremierLeague}" ScatterHeight="10"/>      
 <chart:FastScatterBitmapSeries Interior="#e19620" Label="La Liga (Spain)" XBindingPath="Spent" ScatterHeight="10" ScatterWidth="10" ShapeType="Square" YBindingPath="Earned" ItemsSource="{Binding Liga}" />
 <chart:FastScatterBitmapSeries Interior="#00008B" Label="Ligue 1 (France) XBindingPath="Spent" ScatterHeight="10" ScatterWidth="10" ShapeType="Square" YBindingPath="Earned" ItemsSource="{Binding Ligue1}" />
 <chart:FastScatterBitmapSeries Interior="#000000 Label="Bundesliga (Germany)" XBindingPath="Spent" ScatterHeight="10" ShapeType="Square" YBindingPath="Earned" ItemsSource="{Binding Bundesliga}" ScatterWidth="10"/> 
 <chart:FastScatterBitmapSeries Interior="#49a349" Label="Serie A (Italy)" ScatterHeight="10" ScatterWidth="10" XBindingPath="Spent" ShapeType="Square" YBindingPath="Earned" ItemsSource="{Binding SerieA}" />
</chart:SfChart.Series>

```

## Step 8: Customize the legends in the chart

Legends help us easily understand the different categories in the data set. You can customize the legend in the WPF scatter chart using the [ItemTemplate](https://help.syncfusion.com/wpf/charts/legend#customization "ItemTemplate property of WPF Scatter Chart") property in the **ChartLegend**.

```xml
<Grid.Resources>
 <DataTemplate x:Key="legend">
  <StackPanel Orientation="Horizontal">
   <Image Source="{Binding Converter={StaticResource imageConverter}}" Margin="3,3,0,0" Height="12" VerticalAlignment="Center" Width="20" HorizontalAlignment="Left" />
   <TextBlock Text="{Binding Label}" Foreground="{Binding Interior}" FontSize="13" Margin="3" FontWeight="SemiBold"/>
  </StackPanel>
 </DataTemplate>
</Grid.Resources>
<chart:SfChart.Legend>
 <chart:ChartLegend ItemTemplate="{StaticResource legend}" ItemMargin="50,50,0,0" DockPosition="Right" />
</chart:SfChart.Legend>

```

## Step 9: Add tooltip interaction

Refer to the following code example to enable and customize the default appearance of the [tooltip](https://help.syncfusion.com/wpf/charts/interactive-features/tooltip#customizing-the-appearance "Customizing the appearance of the tooltip in WPF Scatter Chart") in the WPF scatter chart.

```xml
<Grid.Resources>
 <local:Converter x:Key="imageConverter" />
 <local:ImageConverter x:Key="toolTipConverter" />
 <local:ColorConverter x:Key="color" />
 <DataTemplate x:Key="toolTip1">
  <StackPanel>
   <StackPanel Orientation="Horizontal">
    <Image Source="{Binding Item.Club,Converter={StaticResource toolTipConverter}}" Height="30" Width="30" />
    <Label Content="{Binding Item.Club}" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Black" FontWeight="Bold" FontFamily="Helvetica" Margin="0,2,0,2" FontSize="12" Grid.Row="0"/>
   </StackPanel>
   <Rectangle Fill="Gray" Height="1" Width="100" />
   <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" >
    <Rectangle Stroke="Black" StrokeThickness="1" Height="10" Width="10" Fill="{Binding Item,Converter={StaticResource color}}" />
    <Label Content="{Binding Item.LeagueCode}" HorizontalAlignment="Center" HorizontalContentAlignment="Left" Foreground="Black" FontWeight="Bold" FontFamily="Helvetica" FontSize="12" Margin="3,0,3,0" />
    <TextBlock Text=" : " FontWeight="Bold" VerticalAlignment="Center" Foreground="Black" FontFamily="Helvetica" Margin="0,0,3,0" FontSize="12" />
    <TextBlock Text="{Binding Item.Net, StringFormat='{}{0}M€'}" FontWeight="Bold" VerticalAlignment="Center" Foreground="Black" FontFamily="Helvetica" Margin="0,0,3,0" FontSize="12" />
   </StackPanel>
  </StackPanel>
 </DataTemplate>
</Grid.Resources>

```

Finally, configure the tooltip behavior using the following code example.

```xml
<Grid.Resources>
 <Style TargetType="Path" x:Key="style">
  <Setter Property="Stroke" Value="Black"/>
  <Setter Property="Fill" Value="White"/>
  <Setter Property="StrokeThickness" Value="1"/>
 </Style>
</Grid.Resources>

<chart:SfChart.Behaviors>
 <chart:ChartTooltipBehavior ShowDuration="2500" Style="{StaticResource style}"/>
</chart:SfChart.Behaviors>

<chart:SfChart.Series>
 <chart:FastScatterBitmapSeries ShowTooltip="True" TooltipTemplate="{StaticResource toolTip1}" />
 <chart:FastScatterBitmapSeries TooltipTemplate="{StaticResource toolTip1}" ShowTooltip="True" />
 <chart:FastScatterBitmapSeries TooltipTemplate="{StaticResource toolTip1}" ShowTooltip="True" />
 <chart:FastScatterBitmapSeries TooltipTemplate="{StaticResource toolTip1}" ShowTooltip="True" />
 <chart:FastScatterBitmapSeries TooltipTemplate="{StaticResource toolTip1}" ShowTooltip="True" />
</chart:SfChart.Series>
```

After executing these code examples, we will get output like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Visualizing-Money-Spent-and-Earned-by-Football-League-Clubs-Using-WPF-Scatter-Chart.png" alt="Visualizing Money Spent and Earned by Football League Clubs Using WPF Scatter Chart" style="width:100%">

  <figcaption>Visualizing Money Spent and Earned by Football League Clubs Using WPF Scatter Chart</figcaption>

</figure>
## GitHub reference

For more details, refer to the [project on GitHub](https://github.com/SyncfusionExamples/Create-a-Football-Transfer-Spending-and-Earnings-data-around-the-world-in-2016 "Visualizing Football Transfer Spending and Earnings Data around the World in 2016 GitHub demo").

## Conclusion

Thanks for reading! In this blog, we have seen how to visualize football league clubs’ transfer spending and earning data using the Syncfusion [WPF scatter chart](https://www.syncfusion.com/wpf-controls/charts/wpf-scatter-chart "WPF Scatter Chart"). We encourage you to try these steps and share your thoughts in the comments below.

You can also explore our [WPF Charts examples](https://github.com/syncfusion/wpf-demos/tree/master/chart "WPF Charts GitHub demos") to learn more about the supported chart types and how easy it is to configure them for stunning visual effects.

The latest version of the WPF Charts control is available for current customers from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio license and downloads page") page. If you are not a Syncfusion customer, try our [30-day free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to check it out.

For questions, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/wpf "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Visualize JSON Data Quickly Using WPF Charts](https://www.syncfusion.com/blogs/post/visualize-json-data-wpf-charts.aspx "Blog: Visualize JSON Data Quickly Using WPF Charts")
- [Seamlessly Load Data from Different Data Sources into WPF Charts](https://www.syncfusion.com/blogs/post/different-data-source-wpf-charts.aspx "Blog: Seamlessly Load Data from Different Data Sources into WPF Charts")
- [Give Your WPF Application a Fresh Look with New Windows 11 Themes](https://www.syncfusion.com/blogs/post/give-your-wpf-application-a-fresh-look-with-new-windows-11-themes.aspx "Blog: Give Your WPF Application a Fresh Look with New Windows 11 Themes")
- [Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss](https://www.syncfusion.com/blogs/post/dotnet-maui-inversed-column-chart-visualize-yearly-operating-loss-data.aspx "Chart of the Week: Creating a .NET MAUI Inversed Column Chart to Visualize Meta Reality Labs’s Yearly Operating Loss")