WPF Scatter Chart | High Performance Chart

Overview

The WPF scatter chart plots data with two numeric parameters. Plot multiple scatter series in a single chart to compare different data sets. The scatter chart uses Cartesian coordinates to display values for two variables, typically, for a set of data.

WPF Scatter Chart documentation

WPF Scatter Chart

Key features

WPF Scatter Chart with Zooming and Panning

Zooming and panning

Zoom and pan to visualize data points in any region when dealing with large amounts of data.

WPF Scatter Chart with customized Border and Color

UI styling

The look and feel of a scatter chart can be customized using the built-in APIs.

Code example

Easily get started with the WPF Scatter Chart using a few simple lines of C# code example as demonstrated below,

xaml
c#
<Window x:Class="ChartExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
        mc:Ignorable="d"
        Title="WPF Scatter Chart" Height="450" Width="700">
    
    <!--Setting DataContext-->
    <Window.DataContext>
        <local:ViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <chart:SfChart Height="300" Width="500">
            <!--Initialize the horizontal axis for the WPF Chart.-->
            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis />
            </chart:SfChart.PrimaryAxis>
 
            <!--Initialize the vertical axis for the WPF Chart.-->
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis />
            </chart:SfChart.SecondaryAxis>
           
            <!--Adding Scatter Series to the WPF Chart.-->
            <chart:ScatterSeries 
                    ScatterHeight="9"
                    ScatterWidth="9"
                    ItemsSource="{Binding Data}" 
                    XBindingPath="Month"
                    YBindingPath="Target">
            </chart:ScatterSeries>
        </chart:SfChart>
    </StackPanel>
</Window>
public class Model
{
    public string Month { get; set; }
 
    public double Target { get; set; }
 
    public Model(string xValue, double yValue)
    {
        Month = xValue;
        Target = yValue;
    }
}
 
public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }
 
    public ViewModel()
    {
        Data = new ObservableCollection<Model>()
        {
            new Model("Jan", 50),
            new Model("Feb", 70),
            new Model("Mar", 65),
            new Model("Apr", 57),
            new Model("May", 48), 
        };
    }
}