Data Markers in Xamarin Charts (SfChart)

The data markers are used to provide information about the data points to the user. You can add a shape and label to adorn each data point. This can be enabled using the following code snippet,





lineSeries.DataMarker = new ChartDataMarker();

Data markers support in Xamarin.Forms Chart

Customizing labels

Data labels are enabled by default but you can also change the visibility of the labels using ShowLabel property of ChartDataMarker. The label appearance can be customized using LabelStyle property.

  • TextColor – used to change the color of the label.
  • BackgroundColor – used to change the label background color.
  • BorderColor – used to change the border color.
  • BorderThickness – used to change the thickness of the border.
  • Font – used to change the text size, font family and font weight.
  • Margin - used to change the margin size for labels.
  • Angle – used to rotate the labels.
  • LabelPadding - used to move the data label in the respective direction. For example, the positive labels in column series will be moved upwards and negative labels in column series will be moved downwards.

Following code snippet illustrates the customization of label and its background,


	<chart:ChartDataMarker ShowLabel="True">


			<chart:DataMarkerLabelStyle TextColor="Blue"



lineSeries.DataMarker = new ChartDataMarker();

lineSeries.DataMarker.ShowLabel = true;

lineSeries.DataMarker.LabelStyle.TextColor = Color.Blue;

lineSeries.DataMarker.LabelStyle.BorderColor = Color.Red;

lineSeries.DataMarker.LabelStyle.BorderThickness = 2;

lineSeries.DataMarker.LabelStyle.BackgroundColor = Color.Aqua;

lineSeries.DataMarker.LabelStyle.Angle = 315;

lineSeries.DataMarker.LabelStyle.Margin = 5;

lineSeries.DataMarker.LabelStyle.Font = Font.SystemFontOfSize(18, FontAttributes.Italic);

Customizing the labels of data markers in Xamarin.Forms Chart

Formatting label content

You can customize the content of the label using LabelContent property. Following are the two options that are supported now,

  • Percentage – This will show the percentage value of corresponding data point Y value, this is often used in pie, doughnut, funnel and pyramid series types.
  • YValue – This will show the corresponding Y value.


		<chart:ChartDataMarker LabelContent="Percentage"/>


pieSeries.DataMarker.LabelContent = LabelContent.Percentage;

Formatting the label content of data markers in Xamarin.Forms Chart

DataMarker LabelFormat

Data marker labels can be formatted by using the LabelFormat property. Data marker label values can be formatted with n (number with decimal points), c (Currency) and p (percentage) commands.


    <chart:ChartDataMarker ShowLabel="True">
            <chart:DataMarkerLabelStyle LabelFormat="$##.##"/>
ChartDataMarker chartDataMarker = new ChartDataMarker();
chartDataMarker.LabelStyle = new DataMarkerLabelStyle { LabelFormat = "$##.##" };
series.DataMarker = chartDataMarker;

LabelFormat support in Xamarin.Forms Chart

Label position

The LabelPosition property is used to position the data marker labels at Center, Inner and Outer position of the actual data point position. By default, labels are positioned based on the series types for better readability. You can move the labels horizontally and vertically using OffsetX and OffsetY properties respectively.

The following screenshot illustrates the default position of data marker labels,

Positioning the data marker labels support in Xamarin.Forms Chart

The following code sample illustrates the center position of data marker labels,



		<chart:DataMarkerLabelStyle LabelPosition="Center"/>


series.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Center;

Positioning the data marker labels support in Xamarin.Forms Chart

The following code sample illustrates the Inner position of data marker labels,



		<chart:DataMarkerLabelStyle LabelPosition="Inner"/>


series.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Inner;

Positioning the data marker labels support in Xamarin.Forms Chart

The following code sample illustrates the outer position of data marker labels,



		<chart:DataMarkerLabelStyle LabelPosition="Outer"/>


series.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Outer;

Positioning the data marker labels support in Xamarin.Forms Chart

Smart labels

This feature is used to arrange the data marker labels smartly and avoid the intersection when there is overlapping of labels. The property EnableSmartLabels in CircularSeries, is used to arrange the data marker labels smartly. By default, it is false, we need to enable this property.

The following code sample illustrates how to enable the smart labels.


	<chart:PieSeries ItemsSource="{Binding Data}"
					 EndAngle ="435"
					 ConnectorLineType = "Bezier" 
					 DataMarkerPosition = "OutsideExtended">
			<chart:ChartDataMarker />
SfChart chart = new SfChart();

PieSeries pieSeries = new PieSeries()
	ItemsSource = Data,
	XBindingPath = "Expense",
	YBindingPath = "Value",
	EnableSmartLabels = true,
	DataMarkerPosition = CircularSeriesDataMarkerPosition.OutsideExtended,
	ConnectorLineType= ConnectorLineType.Bezier,
	DataMarker=new ChartDataMarker(),


Smart labels support for data markers in Xamarin.Forms Chart

Customizing marker shapes

Shapes can be added to chart data marker by setting the ShowMarker property to true. There are different shapes you can set to the chart using MarkerType property such as Triangle, Circle, Diamond etc. Following properties are used to customize marker appearance,

The following code example shows how to enable marker and specify its types,


	<chart:ChartDataMarker ShowLabel="False" 

lineSeries.DataMarker = new ChartDataMarker();

lineSeries.DataMarker.ShowLabel = false;

lineSeries.DataMarker.ShowMarker = true;

lineSeries.DataMarker.MarkerType = DataMarkerType.Hexagon;

lineSeries.DataMarker.MarkerWidth = 20;

lineSeries.DataMarker.MarkerHeight = 20;

lineSeries.DataMarker.MarkerColor = Color.Aqua;

lineSeries.DataMarker.MarkerBorderColor = Color.Red;

lineSeries.DataMarker.MarkerBorderWidth = 2;

Data markers shape customization support in Xamarin.Forms Chart

Apply series color

The UseSeriesPalette property is used to apply the series color to background color of data marker labels. The default value of this property is true.



		<chart:ChartDataMarker UseSeriesPalette="False"/>


columnSeries.DataMarker = new ChartDataMarker();
columnSeries.DataMarker.UseSeriesPalette = false;

Connector line

This feature is used to connect label and data point using a line. It can be enabled for any chart types but this is often used with Pie and Doughnut chart types. The ConnectorLineStyle property used to customize the connector line.

The following code illustrates how to specify the connector height and its angle,




			<chart:ConnectorLineStyle ConnectorHeight="50"



lineSeries.DataMarker.ConnectorLineStyle.ConnectorHeight = 50;

lineSeries.DataMarker.ConnectorLineStyle.ConnectorRotationAngle = 175;

lineSeries.DataMarker.ConnectorLineStyle.StrokeColor = Color.Blue;

lineSeries.DataMarker.ConnectorLineStyle.StrokeWidth = 3;

lineSeries.DataMarker.ConnectorLineStyle.StrokeDashArray = new double[2] { 2, 3 };

Connector line support for data markers in Xamarin.Forms Chart


For Pie and Doughnut series, you can set different connector line types such as Line, StraightLine and Bezier curve using the ConnectorType property of pie and doughnut series.

Label template

You can customize the appearance of the data marker label with your own template using the LabelTemplate property of ChartDataMarker.


The BindingContext of template is the corresponding underlying model provided in the items source of chart series.You can also bind the corresponding ChartDataMarkerLabel class object using the LabelContent property set as DataMarkerLabel.

        <DataTemplate x:Key="dataMarkerTemplate">
            <StackLayout Orientation="Horizontal">
                <Label Text="{Binding Value}" VerticalOptions="Center" FontSize = "15"/>
                <Image Source="Down.jpg" WidthRequest="30" HeightRequest="30"/>

    <chart:BarSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Value">
            <chart:ChartDataMarker ShowLabel="True" LabelTemplate="{StaticResource dataMarkerTemplate}">
                    <chart:DataMarkerLabelStyle LabelPosition="Outer" />
SfChart chart = new SfChart ();

var barSeries = new BarSeries();
barSeries.Color = Color.FromRgb(231, 87, 89);
barSeries.ItemsSource = Data;
barSeries.XBindingPath = "Name";
barSeries.YBindingPath = "Value";
barSeries.DataMarker = new ChartDataMarker();
barSeries.DataMarker.ShowLabel = true;
barSeries.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Outer;

DataTemplate dataMarkerTemplate = new DataTemplate(() => 
    StackLayout stack = new StackLayout();
    stack.Orientation = StackOrientation.Horizontal;
    Label label = new Label();
    label.SetBinding(Label.TextProperty, "Value");
    label.FontSize = 15;
    label.VerticalOptions = LayoutOptions.Center;
    Image image = new Image();
    image.Source = "Down.jpg";
    image.WidthRequest = 30;
    image.HeightRequest = 30;
    return stack;

barSeries.DataMarker.LabelTemplate = dataMarkerTemplate;

Label template support for data markers in Xamarin.Forms Chart



The DataMarkerLabelCreated event occurs when the data marker label is created. This argument contains object of the ChartDataMarkerLabel. The following properties are available in DataMarkerLabel to customize the appearance of data markers based on condition.

  • Label – Gets or sets the text of data marker.
  • BackgroundColor – Gets the background color of data marker label.
  • Index – Gets the data point index of data marker label.
  • XPosition – Gets the x-position of data marker label.
  • YPosition – Gets the y-position of data marker label.
  • LabelStyle – Gets or sets the label style to customize the appearance of individual data marker label.
  • MarkerWidth – Gets or sets the marker width.
  • MarkerHeight – Gets or sets the marker height.
  • MarkerBorderWidth – Gets or sets the border width of marker symbol.
  • MarkerBorderColor – Gets or sets the border color of marker symbol.
  • MarkerColor – Gets or sets the marker color.
  • MarkerType – Gets or sets the shape type of marker. The available shapes are ellipse, diamond, hexagon, cross, HorizontalLine, VerticalLine, InvertedTriangle, triangle, pentagon, plus, and square.
  • Data - Gets the underlying data of data marker label.

See also

How to add a custom data marker in Xamarin.Forms Chart

How to rotate the data marker labels

How to change the data marker connector type of pie and doughnut series to Bezier

How to change the data marker symbol type in Chart

How to add the icons on top of each column/bar segment in Xamarin.Forms Chart

How to display underlying model values in Xamarin.Forms Chart data marker

How to place the Xamarin.Forms Chart DataMarker label at the top and bottom of the marker alternatively