public class SplineSeries : XYDataSeries, IDatapointSelectionDependent, ITooltipDependent, IDataTemplateDependent, IDrawCustomLegendIcon, IMarkerDependent

Remarks

To render a series, create an instance of SplineSeries class, and add it to the Series collection.

It provides options for Fill, PaletteBrushes, StrokeWidth, StrokeDashArray, and Opacity to customize the appearance.

EnableTooltip - A tooltip displays information while tapping or mouse hovering above a segment. To display the tooltip on a chart, you need to set the EnableTooltip property as true in SplineSeries class, and also refer TooltipBehavior property.

Data Label - Data labels are used to display values related to a chart segment. To render the data labels, you need to set the ShowDataLabels property as true in SplineSeries class. To customize the chart data labels alignment, placement, and label styles, you need to create an instance of CartesianDataLabelSettings and set to the DataLabelSettings property.

Animation - To animate the series, set True to the EnableAnimation property.

LegendIcon - To customize the legend icon using the LegendIcon property.

Examples

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.XAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.XAxes>

          <chart:SfCartesianChart.YAxes>
              <chart:NumericalAxis/>
          </chart:SfCartesianChart.YAxes>

          <chart:SfCartesianChart.Series>
              <chart:SplineSeries
                  ItemsSource = "{Binding Data}"
                  XBindingPath = "XValue"
                  YBindingPath = "YValue"/>
          </chart:SfCartesianChart.Series>  

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();

    NumericalAxis xAxis = new NumericalAxis();
    NumericalAxis yAxis = new NumericalAxis();

    chart.XAxes.Add(xAxis);
    chart.YAxes.Add(yAxis);

    ViewModel viewModel = new ViewModel();

    SplineSeries series = new SplineSeries();
    series.ItemsSource = viewModel.Data;
    series.XBindingPath = "XValue";
    series.YBindingPath = "YValue";
    chart.Series.Add(series);

    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
       Data = new ObservableCollection<Model>();
       Data.Add(new Model() { XValue = 10, YValue = 100 });
       Data.Add(new Model() { XValue = 20, YValue = 150 });
       Data.Add(new Model() { XValue = 30, YValue = 110 });
       Data.Add(new Model() { XValue = 40, YValue = 230 });
    }

Constructors

SplineSeries()

Initializes a new instance of the SplineSeries class.

Declaration

public SplineSeries()

Fields

MarkerSettingsProperty

Identifies the MarkerSettings bindable property.

Declaration

public static readonly BindableProperty MarkerSettingsProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The MarkerSettings property allows customize the series markers.

ShowMarkersProperty

Identifies the ShowMarkers bindable property.

Declaration

public static readonly BindableProperty ShowMarkersProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The ShowMarkers property determines whether the chart markers are visible on the series.

StrokeDashArrayProperty

Identifies the StrokeDashArray bindable property.

Declaration

public static readonly BindableProperty StrokeDashArrayProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The StrokeDashArray property helps to customize the stroke dash patterns of the spline.

TypeProperty

Identifies the Type bindable property.

Declaration

public static readonly BindableProperty TypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The Type property indicates the shape of the spline series.

Properties

MarkerSettings

Gets or sets the option to customize the series markers.

Declaration

public ChartMarkerSettings MarkerSettings { get; set; }

Property Value

Type	Description
ChartMarkerSettings	It accepts ChartMarkerSettings.

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:SplineSeries ItemsSource = "{Binding Data}"
                             XBindingPath = "XValue"
                             YBindingPath = "YValue"
                             ShowMarkers = "True">
              <chart:SplineSeries.MarkerSettings>
                    <chart:ChartMarkerSettings Fill = "Red" Height = "15" Width = "15" />
              </chart:SplineSeries.MarkerSettings>
         </chart:SplineSeries>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

   ChartMarkerSettings chartMarkerSettings = new ChartMarkerSettings()
   {
       Fill = new SolidColorBrush(Colors.Red),
       Height = 15,
       Width = 15,
    };
    SplineSeries series = new SplineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          ShowMarkers = true,
          MarkerSettings = chartMarkerSettings,
    };

    chart.Series.Add(series);

ShowMarkers

Gets or sets the value indicating whether to show markers for the series data point.

Declaration

public bool ShowMarkers { get; set; }

Property Value

Type	Description
System.Boolean	It accepts `bool`> values and its default value is false.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:SplineSeries ItemsSource = "{Binding Data}"
                             XBindingPath = "XValue"
                             YBindingPath = "YValue"
                             ShowMarkers = "True"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    SplineSeries series = new SplineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          ShowMarkers = true,
    };

    chart.Series.Add(series);

StrokeDashArray

Gets or sets the stroke dash array to customize the appearance of stroke.

Declaration

public DoubleCollection StrokeDashArray { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DoubleCollection	It accepts the Microsoft.Maui.Controls.DoubleCollection value and the default value is null.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:SplineSeries ItemsSource = "{Binding Data}"
                             XBindingPath = "XValue"
                             YBindingPath = "YValue"
                             StrokeDashArray = "5,3"
                             Stroke = "Red" />

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    DoubleCollection doubleCollection = new DoubleCollection();
    doubleCollection.Add(5);
    doubleCollection.Add(3);
    SplineSeries series = new SplineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          StrokeDashArray = doubleCollection,
          Stroke = new SolidColorBrush(Colors.Red),
    };

    chart.Series.Add(series);

Type

Gets or sets a value that indicates the shape of the spline series.

Declaration

public SplineType Type { get; set; }

Property Value

Type	Description
SplineType	It accepts SplineType values and its default value is Natural.

Examples

Xaml
C#

    <chart:SfCartesianChart>

    <!-- ... Eliminated for simplicity-->

         <chart:SplineSeries ItemsSource = "{Binding Data}"
                             XBindingPath = "XValue"
                             YBindingPath = "YValue"
                             Type = "Monotonic"/>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    ViewModel viewModel = new ViewModel();

    // Eliminated for simplicity

    SplineSeries series = new SplineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          Type = SplineType.Monotonic,
    };

    chart.Series.Add(series);

Methods

CreateSegment()

Creates and initializes a new chart segment for the chart.

Declaration

protected override ChartSegment CreateSegment()

Returns

Type
ChartSegment

Overrides

ChartSeries.CreateSegment()

DrawMarker(ICanvas, Int32, ShapeType, Rect)

Draws the markers for the spline series at each data point location on the chart.

Declaration

protected virtual void DrawMarker(ICanvas canvas, int index, ShapeType type, Rect rect)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
System.Int32	index
ShapeType	type
Microsoft.Maui.Graphics.Rect	rect