Telerik UI for Windows 8 XAML

Overview

When using ScatterAreaSeries the data points are connected with straight line segments and the area enclosed by the line and the coordinate axis may be optionally stroked and/or filled as shown on the image below.

Scatter Area Series

Properties

Note

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

  • StrokeMode: Gets or sets the mode that defines how the plot area is stroked. The available modes are:

    • None: No outlining.

    • LeftLine: The left border of the plot area defined by the data points and the horizontal axis is outlined.

    • Points: The line that connects all points is outlined. This is the default mode.

    • RightLine: The right border of the plot area defined by the data points and the horizontal axis is outlined.

    • PlotLine: The bottom border of the plot area is outlined.

    • LeftAndPoints: LeftLine and Points modes are enabled.

    • RightAndPoints: RightLine and Points modes are enabled.

    • AllButPlotLine: All modes except the PlotLine are enabled.

    • All: All modes are enabled - the plot area is fully outlined.

  • Fill (Brush): Gets or sets the Brush used to fill the plot area.

Example

Here's an example of how to implement a RadCartesianChart with ScatterAreaSeries.

  • First, create a class for the sample data.

    C# Copy imageCopy
    public class Data
    {
        public double Category { get; set; }
    
        public double Value { get; set; }
    }
  • Then, create the sample data.

    C# Copy imageCopy
    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.scatterAreaSeries.DataContext = sampleData;
  • Finally, create a hart using XAML.

    XAML Copy imageCopy
    <telerik:RadCartesianChart x:Name="scatterAreaSeries">
        <telerik:RadCartesianChart.VerticalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.VerticalAxis>
        <telerik:RadCartesianChart.HorizontalAxis>
            <telerik:LinearAxis/>
        </telerik:RadCartesianChart.HorizontalAxis>
        <telerik:ScatterAreaSeries ItemsSource="{Binding}">
            <telerik:ScatterAreaSeries.XValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="Category"/>
            </telerik:ScatterAreaSeries.XValueBinding>
            <telerik:ScatterAreaSeries.YValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="Value"/>
            </telerik:ScatterAreaSeries.YValueBinding>
        </telerik:ScatterAreaSeries>
    </telerik:RadCartesianChart>