.NET MAUI Chart SplineArea Series

The Cartesian Chart visualizes the SplineArea Series as an area on the chart that is enclosed by the coordinate axes and straight line segments, which connect the data points represented by these series. The SplineArea Series extend the Categorical Stroked Series, so they are also Categorical Series and require one Categorical Axis and one Numerical Axis.

Features

The SplineArea Series provides the following properties:

• Stroke (Color)—Changes the color for drawing lines.
• StrokeThickness (double)—Changes the width of the lines.
• Fill (Color)—Changes the color for filling the area shapes.

SplineArea Series Example

The following example shows how to create a RadCartesianChart with a SplineArea Series:

1. Create the needed business objects, for example:

• C#

public class CategoricalData
{
    public object Category { get; set; }
    public double Value { get; set; }
}

2. reate a ViewModel:

• C#

public class CategoricalViewModel
{
    public ObservableCollection<CategoricalData> Data { get; set; }

    public CategoricalViewModel()
    {
        this.Data = GetCategoricalData();
    }

    private static ObservableCollection<CategoricalData> GetCategoricalData()
    {
        var data = new ObservableCollection<CategoricalData>
        {
            new CategoricalData { Category = "Greenings", Value = 52 },
            new CategoricalData { Category = "Perfecto", Value = 19 },
            new CategoricalData { Category = "NearBy", Value = 82 },
            new CategoricalData { Category = "Family", Value = 23 },
            new CategoricalData { Category = "Fresh", Value = 56 },
        };
        return data;
    }
}

3. Use the following snippet to declare a RadCartesianChart with a SplineArea Series in XAML and in C#:

• XAML

<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.BindingContext>
        <local:CategoricalViewModel />
    </telerik:RadCartesianChart.BindingContext>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis LabelFitMode="MultiLine"
                              PlotMode="OnTicks" />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:NumericalAxis />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:SplineAreaSeries ValueBinding="Value"
                               CategoryBinding="Category"
                               ItemsSource="{Binding Data}" />
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

The following image shows the end result:

Customization Example

You can further customize the SplineArea Series:

• C#

var series = new SplineAreaSeries
{
    Stroke = new Color(0.6, 0.6, 0.9),
    StrokeThickness = 5,
    Fill = new Color(0.8, 0.8, 1)
};