maui-devexpress-dot-maui-dot-charts-1477dc30.md
Displays data as points connected by a curved line.
Namespace : DevExpress.Maui.Charts
Assembly : DevExpress.Maui.Charts.dll
NuGet Package : DevExpress.Maui.Charts
public class SplineSeries :
LineSeries
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.
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;
}
}
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.
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.
<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>
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.
<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>
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.
<dxc:ChartView>
<dxc:ChartView.Series>
<dxc:SplineSeries DisplayName="Center"
LegendTextPattern="{}"{S}" Branch">
<!--...-->
</dxc:SplineSeries>
<dxc:SplineSeries DisplayName="East"
LegendTextPattern="{}"{S}" 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.
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.
This example does the following:
<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>
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.
<ContentPage.Resources>
<dxc:SeriesCrosshairOptions
x:Key="splineSeriesHintOptions"
PointTextPattern="{}"{S}" 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.
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).
<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>
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.
System.Object BindableObject Element ChartElementBase ChartSeriesElement SeriesBase Series XYSeries LineSeries SplineSeries
YieldIfNotNull<SplineSeries>()
See Also