SplineSeries Class

Displays data as points connected by a curved line.

Namespace: DevExpress.Maui.Charts

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public class SplineSeries :
    LineSeries

Remarks

This series type is similar to LineSeries, but displays a smooth curve through data points.

The SplineSeries.LineTension property specifies the smoothness of a spline curve.

Series Data

To bind a spline series to data, set the SplineSeries.Data property to an instance of the SeriesDataAdapter class. Use the adapter’s properties to specify the data source and its fields that contain arguments and values (this series type requires 1 argument and 1 value for a data point).

Xaml

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>
<dxc:ChartView>
    <dxc:ChartView.Series>
        <dxc:SplineSeries>
            <dxc:SplineSeries.Data>
                <dxc:SeriesDataAdapter DataSource="{Binding PowerConsumptionCenterBranch}"
                                       ArgumentDataMember="Time">
                    <dxc:ValueDataMember Type="Value" Member="Power"/>
                </dxc:SeriesDataAdapter>
            </dxc:SplineSeries.Data>
        </dxc:SplineSeries>
    </dxc:ChartView.Series>
</dxc:ChartView>

Show View Model

C#

public class MainViewModel {
   public List<SplineDataItem> PowerConsumptionCenterBranch { get; }

   public MainViewModel() {
       PowerConsumptionCenterBranch = new List<SplineDataItem> {
          new SplineDataItem(new DateTime(1, 1, 1, 7, 0, 0), 429),
          new SplineDataItem(new DateTime(1, 1, 1, 8, 0, 0), 432),
          new SplineDataItem(new DateTime(1, 1, 1, 9, 0, 0), 301),
          new SplineDataItem(new DateTime(1, 1, 1, 10, 0, 0), 307),
          new SplineDataItem(new DateTime(1, 1, 1, 11, 0, 0), 310),
          new SplineDataItem(new DateTime(1, 1, 1, 12, 0, 0), 380),
          new SplineDataItem(new DateTime(1, 1, 1, 13, 0, 0), 384),
          new SplineDataItem(new DateTime(1, 1, 1, 14, 0, 0), 398),
          new SplineDataItem(new DateTime(1, 1, 1, 15, 0, 0), 379),
          new SplineDataItem(new DateTime(1, 1, 1, 16, 0, 0), 220),
          new SplineDataItem(new DateTime(1, 1, 1, 17, 0, 0), 321),
          new SplineDataItem(new DateTime(1, 1, 1, 18, 0, 0), 341),
          new SplineDataItem(new DateTime(1, 1, 1, 19, 0, 0), 368),
          new SplineDataItem(new DateTime(1, 1, 1, 20, 0, 0), 557),
          new SplineDataItem(new DateTime(1, 1, 1, 21, 0, 0), 523),
          new SplineDataItem(new DateTime(1, 1, 1, 22, 0, 0), 501),
          new SplineDataItem(new DateTime(1, 1, 1, 23, 0, 0), 443)
       };
   }
}

public class SplineDataItem {
   public DateTime Time { get;}
   public double Power { get; }

   public SplineDataItem(DateTime time, double power) {
       Time = time;
       Power = power;
   }
}

Important

ChartView chooses the X-axis type depending on data in the first series. If you need to explicitly specify argument axis type for the chart or an individual series, use the ChartView.AxisX or Series.AxisX property. The assigned object should be compatible with the series data type. Otherwise, the chart does not display the series.

You can also create a custom data adapter, for example, to generate series points dynamically without data storage.

Data Point Markers

To display point markers, set the SplineSeries.MarkersVisible property to true (the default value is false).

You can configure the following appearance settings of point markers:

• Size - Set the SplineSeries.Style property to a LineSeriesStyle object and specify the MarkerSize property.
• Color - Set the LineSeriesStyle.MarkerStyle property to a MarkerStyle object and specify the Fill property.

Xaml

<dxc:SplineSeries MarkersVisible="True">
    <dxc:SplineSeries.Style>
        <dxc:LineSeriesStyle MarkerSize="10">
            <dxc:LineSeriesStyle.MarkerStyle>
                <dxc:MarkerStyle Fill="DeepSkyBlue" />
            </dxc:LineSeriesStyle.MarkerStyle>
        </dxc:LineSeriesStyle>
    </dxc:SplineSeries.Style>
</dxc:SplineSeries>

Series Labels

You can add labels to data point markers to show point values as text on a chart.

To enable series labels, set the SplineSeries.Label property to a MarkerSeriesLabel object, and use this object’s properties to change the label’s settings:

• TextPattern - Formats series label text (refer to the Text Patterns table at the end of this document for the complete list of value and format placeholders).
• Angle, Indent - Specify how a label is positioned relative to a series point.
• Style - Provides access to the SeriesLabelStyle object that stores label appearance settings (TextStyle).
• Visible - Allows you to show or hide labels for the series.

Xaml

<dxc:SplineSeries>
    <dxc:SplineSeries.Label>
        <dxc:MarkerSeriesLabel Angle="80" Indent="7">
            <dxc:MarkerSeriesLabel.Style>
                <dxc:SeriesLabelStyle>
                    <dxc:SeriesLabelStyle.TextStyle>
                        <dxc:TextStyle Color="DarkBlue" Size="10"/>
                    </dxc:SeriesLabelStyle.TextStyle>
                </dxc:SeriesLabelStyle>
            </dxc:MarkerSeriesLabel.Style>
        </dxc:MarkerSeriesLabel>
    </dxc:SplineSeries.Label>
</dxc:SplineSeries>

Legend

A legend (ChartBaseView.Legend) shows which color corresponds to which series.

The LegendItemsBehavior property specifies whether legend items identify entire series or individual points. Each item includes a marker and text. The default text is either the Series.DisplayName property value or the corresponding data point value.

The LegendTextPattern property allows you to configure the legend item string.

Xaml

<dxc:ChartView>
    <dxc:ChartView.Series>
        <dxc:SplineSeries DisplayName="Center" 
                          LegendTextPattern="{}&#34;{S}&#34; Branch">
            <!--...-->
        </dxc:SplineSeries>
        <dxc:SplineSeries DisplayName="East" 
                          LegendTextPattern="{}&#34;{S}&#34; Branch">
            <!--...-->
        </dxc:SplineSeries>
    </dxc:ChartView.Series>
    <dxc:ChartView.Legend>
        <dxc:Legend HorizontalPosition="Left"
                    VerticalPosition="Top"
                    Orientation="LeftToRight"/>
    </dxc:ChartView.Legend>
</dxc:ChartView>

To exclude a particular series from the legend, set that the VisibleInLegend property to false.

Hints

The ChartView can display a hint (ChartView.Hint) as a tooltip or as a crosshair cursor that shows information about a tapped series or data point. Use the Series.HintOptions property to specify which data the series should use for a hint.

Tooltips

This example does the following:

• Set up the chart so that it shows a tooltip for a series point when a user taps it.
• Configure a tooltip for each series on the chart.

1. Set the chart hint’s Behavior property to a TooltipHintBehavior object.
2. Set the SplineSeries.HintOptions property to a SeriesHintOptions object and use the PointTextPattern property to specify the tooltip text pattern.

Xaml

<ContentPage.Resources>
    <dxc:SeriesHintOptions x:Key="splineSeriesHintOptions" PointTextPattern="{}{A$h:mm a}: {V}"/>
</ContentPage.Resources>

<dxc:ChartView>
    <dxc:ChartView.Hint>
        <dxc:Hint>
            <dxc:Hint.Behavior>
                <dxc:TooltipHintBehavior ShowPointTooltip="True" ShowSeriesTooltip="False"/>
            </dxc:Hint.Behavior>
        </dxc:Hint>
    </dxc:ChartView.Hint>

    <dxc:ChartView.Series>
        <dxc:SplineSeries HintOptions="{StaticResource splineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:SplineSeries>
        <dxc:SplineSeries HintOptions="{StaticResource splineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:SplineSeries>
    </dxc:ChartView.Series>    
</dxc:ChartView>

Crosshair Cursor

This example sets up the chart so that it shows a series point hint as a crosshair cursor, and how to specify the hint’s content, data format, and visibility options. The crosshair cursor appears on a long tap.

1. Set the chart hint’s Behavior property to a CrosshairHintBehavior object.

2. Set the SplineSeries.HintOptions property to a SeriesCrosshairOptions object and specify this object’s properties:

   • ShowInLabel - to specify whether the crosshair label should display information for points of the series.
   • PointTextPattern - to define the text pattern used to show information about the series point within a crosshair label.
   • AxisLineVisible, AxisLabelVisible - to specify whether the crosshair cursor should display axis lines and labels for the series.

Xaml

<ContentPage.Resources>
    <dxc:SeriesCrosshairOptions 
        x:Key="splineSeriesHintOptions"
        PointTextPattern="{}&#34;{S}&#34; Branch: {V}kW"
        ShowInLabel="True"
        AxisLabelVisible="True"
        AxisLineVisible="True"/>
</ContentPage.Resources>

<dxc:ChartView>
    <dxc:ChartView.Hint>
        <dxc:Hint>
            <dxc:Hint.Behavior>
                <dxc:CrosshairHintBehavior GroupHeaderTextPattern="{}{A$h:mm a}"/>
            </dxc:Hint.Behavior>
        </dxc:Hint>
    </dxc:ChartView.Hint>

    <dxc:ChartView.Series>
        <dxc:SplineSeries HintOptions="{StaticResource splineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:SplineSeries>
        <dxc:SplineSeries HintOptions="{StaticResource splineSeriesHintOptions}">
            <!--Series Data-->
        </dxc:SplineSeries>
    </dxc:ChartView.Series>    
</dxc:ChartView>

Note

A crosshair cursor also gets data from axes. Use the AxisBase.HintOptions property to specify how the hint interacts with the axis.

Series Appearance

To change the spline series appearance, set the SplineSeries.Style property to a LineSeriesStyle object. This object’s properties allow you to configure the appearance of the series line (Stroke, StrokeThickness) and point markers (MarkerSize, MarkerStyle).

Xaml

<dxc:SplineSeries>
    <dxc:SplineSeries.Style>
        <dxc:LineSeriesStyle MarkerSize="10" Stroke="MediumSeaGreen" StrokeThickness="2">
            <dxc:LineSeriesStyle.MarkerStyle>
                <dxc:MarkerStyle Fill="MediumSeaGreen"
                                 Stroke="SeaGreen"
                                 StrokeThickness="2"/>
            </dxc:LineSeriesStyle.MarkerStyle>
        </dxc:LineSeriesStyle>
    </dxc:SplineSeries.Style>
</dxc:SplineSeries>

Text Patterns

You can define text patterns for a chart’s labels, legend, and hints. A pattern includes regular text (which is displayed as is) and placeholder strings enclosed in braces.

Placeholder	Description
{S}	Displays a series name.
{A}	Displays a series point argument.
{V}	Displays a series point value.

Note

To format these values, use the default format strings after the $ sign.
For example, in the {V$#.##} string, V is a placeholder, $ is a format string separator, and #.## is a format string.

Implements

IElementController

INotifyPropertyChanged

Inheritance

Object

BindableObject

Element

ChartSeriesElement

SeriesBase

Series

XYSeries

LineSeries

SplineSeries