New to Telerik UI for WinUI? Download free 30-day trial

Scatter Spline Series

The ScatterSplineSeries are represented on the chart as data points connected with smooth line segments.

ScatterSplineSeries class inherits from the ScatterLineSeries class - See the inherited properties.

Example

Examples 1, 2 and 3 show how to implement a RadCartesianChart with a ScatterSplineSeries.

Example 1: Defining the model

    public class Data 
    { 
        public double Category { get; set; } 
 
        public double Value { get; set; } 
    } 

Example 2: Populating with data

public MainPage() 
{ 
    this.InitializeComponent(); 
    List<Data> sampleData = new List<Data>(); 
    sampleData.Add(new Data() { Category = 2, Value = 3 }); 
    sampleData.Add(new Data() { Category = 3, Value = 4 }); 
    sampleData.Add(new Data() { Category = 4, Value = 5 }); 
    sampleData.Add(new Data() { Category = 5, Value = 6 }); 
    sampleData.Add(new Data() { Category = 6, Value = 5 }); 
    sampleData.Add(new Data() { Category = 7, Value = 4 }); 
    sampleData.Add(new Data() { Category = 8, Value = 3 }); 
    sampleData.Add(new Data() { Category = 9, Value = 4 }); 
    sampleData.Add(new Data() { Category = 10, Value = 5 }); 
    sampleData.Add(new Data() { Category = 11, Value = 4 }); 
    sampleData.Add(new Data() { Category = 12, Value = 3 }); 
    sampleData.Add(new Data() { Category = 13, Value = 2 }); 
    sampleData.Add(new Data() { Category = 14, Value = 1 }); 
 
    this.scatterSplineSeries.DataContext = sampleData; 
 
} 

Example 3: Defining the RadCartesianChart and ScatterSplineSeries

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"> 
    <telerikChart:RadCartesianChart x:Name="scatterSplineSeries"> 
        <telerikChart:RadCartesianChart.VerticalAxis> 
            <telerikChart:LinearAxis/> 
        </telerikChart:RadCartesianChart.VerticalAxis> 
        <telerikChart:RadCartesianChart.HorizontalAxis> 
            <telerikChart:LinearAxis/> 
        </telerikChart:RadCartesianChart.HorizontalAxis> 
 
        <telerikChart:ScatterSplineSeries ItemsSource="{Binding}"> 
            <telerikChart:ScatterSplineSeries.XValueBinding> 
                <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/> 
            </telerikChart:ScatterSplineSeries.XValueBinding> 
            <telerikChart:ScatterSplineSeries.YValueBinding> 
                <telerikChart:PropertyNameDataPointBinding PropertyName="Value"/> 
            </telerikChart:ScatterSplineSeries.YValueBinding> 
        </telerikChart:ScatterSplineSeries> 
    </telerikChart:RadCartesianChart> 
</Grid> 

Figure 1: Result from Example 3

Scatter Spline Series

In this article
Not finding the help you need?