Class ChartMarkerSettings

Used to customize the data marker symbol

Inheritance

System.Object

ChartMarkerSettings

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.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="#48988B" StrokeWidth="1" Width="8" Height="8"/>
               </chart:LineSeries.MarkerSettings>
           <chart:LineSeries ItemsSource = "{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2"/>
            <chart:LineSeries.MarkerSettings>
                   <chart:ChartMarkerSettings Type="Hexagon" Fill="white" Stroke="#314A6E" 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);

 AreaSeries series = new AreaSeries();
 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 = Brush.WHite;
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	Description
Microsoft.Maui.Controls.BindableProperty

HeightProperty

Identifies the Height bindable property.

Declaration

public static readonly BindableProperty HeightProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

StrokeProperty

Identifies the Stroke bindable property.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

StrokeWidthProperty

Identifies the StrokeWidth bindable property.

Declaration

public static readonly BindableProperty StrokeWidthProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

TypeProperty

Identifies the Type bindable property.

Declaration

public static readonly BindableProperty TypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

WidthProperty

Identifies the Width bindable property.

Declaration

public static readonly BindableProperty WidthProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty

Properties

Fill

Gets or sets the value to fill marker.

Declaration

public Brush Fill { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush

Height

Gets or sets the value for marker height.

Declaration

public double Height { get; set; }

Property Value

Type	Description
System.Double

Stroke

Gets or sets the value for marker stroke.

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush

StrokeWidth

Gets or sets the value for marker stroke width.

Declaration

public double StrokeWidth { get; set; }

Property Value

Type	Description
System.Double

Type

Gets or sets the option for marker shape type.

Declaration

public ShapeType Type { get; set; }

Property Value

Type	Description
ShapeType

Width

Gets or sets the value for marker width.

Declaration

public double Width { get; set; }

Property Value

Type	Description
System.Double