Class ChartMarkerSettings

Used to customize the data marker symbol

Inheritance

System.Object

ChartMarkerSettings

Namespace: Syncfusion.Maui.Toolkit.Charts

Assembly: Syncfusion.Maui.Toolkit.dll

Syntax

public class ChartMarkerSettings : BindableObject

Remarks

By customizing data marker symbol, the position of the data points are highlighted and improves data visualization.

ChartMarkerSettings class provides properties to customize the marker symbol by changing the type, fill, stroke, strokewidth, width and height.

Series

Data marker symbol renders on series types such as Line, Spline and Area series. Based on your requirements and specifications, series and data marker can be added for data visualization.

To render data marker, create an instance of ChartMarkerSettings and set it to the MarkerSettings and add it to the series

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

        <chart:SfCartesianChart.BindingContext>
            <local:ViewModel/>
        </chart:SfCartesianChart.BindingContext>

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

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

        <chart:SfCartesianChart.Series>
           <chart:LineSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue1" ShowMarker="True"/>
           <chart:LineSeries.MarkerSettings>
                   <chart:ChartMarkerSettings Type="Diamond" Fill="white" Stroke="Red" StrokeWidth="1" Width="8" Height="8"/>
               </chart:LineSeries.MarkerSettings>         
       </chart:SfCartesianChart.Series>

</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

ViewModel viewModel = new ViewModel();
chart.BindingContext = viewModel;

NumericalAxis xaxis = new NumericalAxis();
chart.XAxes.Add(xaxis);	

NumericalAxis yAxis = new NumericalAxis();
chart.YAxes.Add(yAxis);

 LineSeries series = new LineSeries();
 series.ItemsSource = viewModel.Data;
 series.XBindingPath = "XValue";
 series.YBindingPath = "YValue";
 series.ShowMarker = true;
 series.MarkerSettings = new ChartMarkerSettings();
 series.MarkerSettings.Type = ShapeType.Diamond;
 series.MarkerSettings.Fill = Colors.White;
 series.MarkerSettings.Stroke = Colors.Red;
 series.MarkerSettings.StrokeWidth = 1;
 series.MarkerSettings.Width = 8;
 series.MarkerSettings.Height = 8;
chart.Series.Add(series);

Constructors

ChartMarkerSettings()

Declaration

public ChartMarkerSettings()

Fields

FillProperty

Identifies the Fill bindable property.

Declaration

public static readonly BindableProperty FillProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Fill bindable property determines the fill color of the data marker.

HeightProperty

Identifies the Height bindable property.

Declaration

public static readonly BindableProperty HeightProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Height bindable property determines the height of the data marker.

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Stroke bindable property determines the stroke color of the data marker.

StrokeWidthProperty

Identifies the StrokeWidth bindable property.

Declaration

public static readonly BindableProperty StrokeWidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the StrokeWidth bindable property determines the stroke width of the data marker.

TypeProperty

Identifies the Type bindable property.

Declaration

public static readonly BindableProperty TypeProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Type bindable property determines the shape type of the data marker.

WidthProperty

Identifies the Width bindable property.

Declaration

public static readonly BindableProperty WidthProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Remarks

The identifier for the Width bindable property determines the width of the data marker.

Properties

Fill

Gets or sets the value to fill marker.

Declaration

public Brush Fill { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

Height

Gets or sets the value for marker height.

Declaration

public double Height { get; set; }

Property Value

Type
System.Double

Stroke

Gets or sets the value for marker stroke.

Declaration

public Brush Stroke { get; set; }

Property Value

Type
Microsoft.Maui.Controls.Brush

StrokeWidth

Gets or sets the value for marker stroke width.

Declaration

public double StrokeWidth { get; set; }

Property Value

Type
System.Double

Remarks

The value needs to be greater than zero.

Type

Gets or sets the option for marker shape type.

Declaration

public ShapeType Type { get; set; }

Property Value

Type
ShapeType

Width

Gets or sets the value for marker width.

Declaration

public double Width { get; set; }

Property Value

Type
System.Double