Class ChartCommonMarker

Specifies the marker configuration of the chart.

Inheritance

System.Object

ChartSubComponent

ChartCommonMarker

ChartMarker

ChartTrendlineMarker

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartCommonMarker : ChartSubComponent, ISubcomponentTracker, IChartElement

Constructors

ChartCommonMarker()

Declaration

public ChartCommonMarker()

Properties

AllowHighlight

Gets or sets a value that allows or disallows marker highlight for the chart tooltip.

Declaration

public bool AllowHighlight { get; set; }

Property Value

Type	Description
System.Boolean	A boolean indicating if marker highlight is allowed. The default value is true.

Remarks

This property determines whether the marker can be highlighted when the tooltip is displayed.

Examples

// This example demonstrates how to add a chart marker and disable its highlight.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" AllowHighlight="false" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Border

Gets or sets the options to customize the border of the marker.

Declaration

public ChartMarkerBorder Border { get; set; }

Property Value

Type	Description
ChartMarkerBorder	An instance of ChartMarkerBorder that specifies the border properties of the marker, such as color and width.

Remarks

Use this property to define the appearance of the marker's border, allowing customization to suit the chart's style and enhance visibility.

Examples

// This example demonstrates how to add a border to a marker in a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true">
                <ChartMarkerBorder Color="red" Width="2"></ChartMarkerBorder>
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

DataLabel

Gets or sets the options to customize the data label for the series.

Declaration

public ChartDataLabel DataLabel { get; set; }

Property Value

Type	Description
ChartDataLabel	An instance of ChartDataLabel that allows customization of the data label properties, including visibility, color, and format.

Remarks

Data labels provide additional information about data points and can be customized for display, enhancing the interpretability of the chart.

Examples

// This example demonstrates how to add a chart marker with a data label.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Opacity="0.5">
                <ChartDataLabel Visible="true" />
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Fill

Gets or sets the fill color of the marker.

Declaration

public string Fill { get; set; }

Property Value

Type	Description
System.String	A string representing the fill color of the marker.

Remarks

This property is used to change the fill color of the marker on the chart.

Examples

// This example demonstrates how to change the fill color of a marker in a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Fill="red" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Height

Gets or sets the height of the marker.

Declaration

public double Height { get; set; }

Property Value

Type	Description
System.Double	A double representing the height of the marker. The default value is 5.

Remarks

This property is used to change the height of the marker on the chart.

Examples

// This example demonstrates how to display a rectangle height as a marker in a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Shape="ChartShape.Rectangle" Height="30"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

ImageUrl

Gets or sets the URL path for the image.

Declaration

public string ImageUrl { get; set; }

Property Value

Type	Description
System.String	A string representing the URL of the image to be used as the marker.

Remarks

Specifying the URL allows for the use of custom images as markers, enhancing the visual representation of data points on the chart.

Examples

// This example demonstrates how to display an image as a marker in a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Shape="ChartShape.Image" ImageUrl="https://ej2.syncfusion.com/demos/src/chart/images/cloud.png" Height="30" Width="30"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

IsFilled

Gets or sets a value indicating whether the marker is filled for the series.

Declaration

public bool IsFilled { get; set; }

Property Value

Type	Description
System.Boolean	true if the marker is filled; otherwise, false. The default value is false.

Remarks

This property determines whether the marker is filled with color or left as an outline. Setting this to true will fill the marker, while setting it to false will leave it unfilled.

Examples

// This example demonstrates how to display filled markers on a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" IsFilled="true" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Offset

Gets or sets the options to customize the offset of the marker.

Declaration

public ChartMarkerOffset Offset { get; set; }

Property Value

Type	Description
ChartMarkerOffset	An instance of ChartMarkerOffset that specifies the horizontal and vertical offsets for positioning the marker.

Remarks

This property allows you to adjust the placement of markers by specifying offsets relative to their default position for better alignment and presentation.

Examples

// This example demonstrates how to apply an offset to a marker in a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true">
                <ChartMarkerOffset X="20" Y="20" />
            </ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Opacity

Gets or sets the opacity of the marker shape.

Declaration

public double Opacity { get; set; }

Property Value

Type	Description
System.Double	A double representing the opacity of the marker shape. Range is from 0 (fully transparent) to 1 (fully opaque). The default value is 1.

Remarks

This property is used to set the transparency level of the marker on the chart.

Examples

// This example demonstrates how to set the opacity of a marker in a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Opacity="0.5" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Shape

Gets or sets the shape of the marker.

Declaration

public ChartShape Shape { get; set; }

Property Value

Type	Description
ChartShape	A ChartShape enumeration value that defines the shape of the marker. The default value is Auto.

Remarks

This property allows users to specify the visual representation of the marker on the chart, enabling customization of the marker's appearance based on the selected shape.

Examples

// This example demonstrates how to display triangle-shaped markers on a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Shape="ChartShape.Triangle" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Visible

Gets or sets a value indicating whether the marker is visible for the series.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true if the marker is visible; otherwise, false. The default value is false.

Remarks

This property controls whether the marker is displayed on the chart. Setting this to true will make the marker visible, while setting it to false will hide it.

Examples

// This example demonstrates how to display markers on a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

Width

Gets or sets the width of the marker.

Declaration

public double Width { get; set; }

Property Value

Type	Description
System.Double	A double representing the width of the marker. The default value is 5.

Remarks

This property is used to change the height of the marker on the chart.

Examples

// This example demonstrates how to display a rectangle width as a marker in a chart series.
<SfChart>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" Name="England" XName="XValue" YName="YValue">
            <ChartMarker Visible="true" Shape="ChartShape.Rectangle" Width="30"/>
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>