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


Overview

The WPF Spline Chart resembles a line chart, but the difference between them is that instead of connecting the data points with straight lines, the data points are connected by smooth Bezier curves.

WPF Spline Chart documentation

WPF Spline Chart


Key features

Different WPF Spline Chart

Spline type

Four different types of rendering: natural, monotonic, cardinal, and clamped.

WPF Vertical Spline Chart

Vertical spline chart

Rotate the spline chart to plot data in a vertical direction and view data from a different perspective.

WPF Spline Chart showing Empty Point aka Null Point

Empty/Null point chart

Empty or null data points are elegantly handled in spline charts.

WPF Spline Chart with Multiple Axes

Multiple axes

Use multiple axes to plot different data sets that widely vary from one another.

WPF Spline Chart with Data Markers

Display markers

The WPF Spline Chart data points are visualized as marks with the built-in symbols such as cross, square, plus, inverted triangles, hexagon, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons.


Code example

<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 Spline 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 Spline Series to the WPF Chart-->
            <chart:SplineSeries 
                    ItemsSource="{Binding Data}" 
                    XBindingPath="Month"
                    YBindingPath="Target">
            </chart:SplineSeries>
        </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), 
        };
    }
}

Learning resources

Navigate to GitHub code used to configure the WPF Spline Chart

GitHub Code

The WPF Spline Chart configuration code is available in GitHub.

Navigate to the options available in User Guide to customize the WPF Spline Chart

WPF Spline Chart User Guide

Learn more about the available options to customize WPF Spline Charts.

Navigate to the API reference documentation of the WPF Spline Chart

WPF Spline Chart API reference

Explore the the WPF Spline Chart APIs.


100+ WPF CONTROLS

Scroll up 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
Live Chat Icon