All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
1.1
The page you are viewing does not exist in version 1.1. This link will take you to the root page.

SplineSeries Class

Displays data as points connected by a curved line.

Namespace: DevExpress.XamarinForms.Charts

Assembly: DevExpress.XamarinForms.Charts.dll

Declaration

public class SplineSeries :
    LineSeries

Remarks

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

Spline Series

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).

<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
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;
   }
}

Spline Series Data

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 create a custom data adapter. This will help you support custom data supply scenarios. For example, you can generate series points on the fly without a 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:

<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.

Spline Series Labels

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.
<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.

Spline Series Legend

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.

<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 demonstrates how to do 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.

Spline Series Tooltips

  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.
<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 demonstrates how to set 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.

Spline Series Crosshair

  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.
<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).

Spline Series Appearance

<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.

Inheritance

Object
Xamarin.Forms.BindableObject
See Also