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

Remarks

To render a series, create an instance of LineSeries 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 LineSeries 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 LineSeries 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:LineSeries
                  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();

    LineSeries series = new LineSeries();
    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

LineSeries()

Initializes a new instance of the LineSeries class.

Declaration

public LineSeries()

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 customization of 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 markers are displayed on the chart points.

StrokeDashArrayProperty

Identifies the StrokeDashArray bindable property.

Declaration

public static readonly BindableProperty StrokeDashArrayProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The StrokeDashArray property specifies customization of the stroke patterns in the series.

Properties

MarkerSettings

Gets or sets the option for customize the series markers.

Declaration

public ChartMarkerSettings MarkerSettings { get; set; }

Property Value

Type	Description
ChartMarkerSettings	It accepts ChartMarkerSettings values.

    <chart:SfCartesianChart>

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

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

    </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,
   };
    LineSeries series = new LineSeries()
    {
          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:LineSeries ItemsSource="{Binding Data}"
                           XBindingPath="XValue"
                           YBindingPath="YValue"
                           ShowMarkers="True"/>

    </chart:SfCartesianChart>

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

    // Eliminated for simplicity

    LineSeries series = new LineSeries()
    {
          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:LineSeries 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);
    LineSeries series = new LineSeries()
    {
          ItemsSource = viewModel.Data,
          XBindingPath = "XValue",
          YBindingPath = "YValue",
          StrokeDashArray = doubleCollection,
          Stroke = new SolidColorBrush(Colors.Red),
    };

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