Data Markers in Xamarin.Android Chart(SfChart)

11 Dec 2020 / 8 minutes to read

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. DataMarker can be enabled using following code snippet,

  • c#
  • [C#]
    
    lineSeries.DataMarker.ShowLabel = true;

    Data markers support in Xamarin.Android Chart

    Customizing Labels

    The DataMarkerLabel appearance can be customized using LabelStyle property.

    • TextColor – used to change the color of the label.
    • BackgroundColor – used to change the label background color.
    • StrokeColor – used to change the border color.
    • StrokeWidth – used to change the width of the border.
    • TextSize – used to change the text size.
    • Typeface – used to change the font family and font weight.
    • MarginTop - used to change the top margin of the labels.
    • MarginBottom - used to change the bottom margin of the labels.
    • MarginLeft - used to change the left margin of the labels.
    • MarginRight - used to change the right margin of the labels.
    • Angle – used to rotate the labels.
    • LabelPadding - used to change the padding value of label.
    • OffsetX - used to set the offset value of X.
    • OffsetY - used to set the offset value of Y.
    • UseSeriesPalette - used to bind the series color to the background color of data marker labels.

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

  • c#
  • [C#]
    
    lineSeries.DataMarker.ShowLabel = true;
    lineSeries.DataMarker.LabelStyle.TextColor = Color.Blue;
    lineSeries.DataMarker.LabelStyle.BackgroundColor = Color.Cyan;
    lineSeries.DataMarker.LabelStyle.StrokeColor = Color.Red;
    lineSeries.DataMarker.LabelStyle.StrokeWidth = 2;
    lineSeries.DataMarker.LabelStyle.TextSize = 18;
    lineSeries.DataMarker.LabelStyle.Typeface = Typeface.DefaultFromStyle(TypefaceStyle.Italic);
    lineSeries.DataMarker.LabelStyle.Angle = 315;
    lineSeries.DataMarker.LabelStyle.MarginLeft = 5;
    lineSeries.DataMarker.LabelStyle.MarginTop = 5;
    lineSeries.DataMarker.LabelStyle.MarginRight = 5;
    lineSeries.DataMarker.LabelStyle.MarginBottom = 5;

    Customizing the labels of data markers in Xamarin.Android 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.
  • c#
  • [C#]
    
    pieSeries.DataMarker.LabelContent = LabelContent.Percentage;

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

    Label Position

    The LabelPosition property is used to position the data marker labels at the Center, Inner and Outer positions.

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

    Positioning the data marker labels support in Xamarin.Android Chart

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

  • c#
  • [C#]
    
    columnSeries.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Center;

    Positioning the data marker labels support in Xamarin.Android Chart

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

  • c#
  • [C#]
    
    columnSeries.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Inner;

    Positioning the data marker labels support in Xamarin.Android Chart

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

  • c#
  • [C#]
    
    columnSeries.DataMarker.LabelStyle.LabelPosition = DataMarkerLabelPosition.Outer;

    Positioning the data marker labels support in Xamarin.Android Chart

    Smart Labels

    In Pie and Doughnut series, overlapping of data labels can be avoided by setting SmartLabelsEnabled property to true.

  • c#
  • [C#]
    
    SfChart chart = new SfChart();
    
    PieSeries pieSeries = new PieSeries()
    {
    
        DataSource = Data,
        StartAngle = 45,
        EndAngle = 405,
        SmartLabelsEnabled = true,
        ConnectorType = ConnectorType.Bezier,
        DataMarkerPosition = CircularSeriesDataMarkerPosition.OutsideExtended,
    
    };
    
    pieSeries.DataMarker.ShowLabel = true;
    
    chart.Series.Add(pieSeries);

    Smart labels support for data markers in Xamarin.Android 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 Cross, Ellipse, Diamond etc. Following properties are used to customize marker appearance,

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

  • c#
  • [C#]
    
    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.Cyan;
    lineSeries.DataMarker.MarkerStrokeColor = Color.Red;
    lineSeries.DataMarker.MarkerStrokeWidth = 2;

    Data markers shape customization support in Xamarin.Android Chart

    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 is used to customize the connector line.

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

  • c#
  • [C#]
    
    lineSeries.DataMarker.ShowLabel = true;
    lineSeries.DataMarker.ConnectorLineStyle.ConnectorHeight = 50;
    lineSeries.DataMarker.ConnectorLineStyle.ConnectorRotationAngle = 175;
    lineSeries.DataMarker.ConnectorLineStyle.StrokeColor = Color.Blue;
    lineSeries.DataMarker.ConnectorLineStyle.StrokeWidth = 3;
    lineSeries.DataMarker.ConnectorLineStyle.PathEffect = new DashPathEffect(new float[] { 3, 3 }, 3);

    Connector line support for data markers in Xamarin.Android Chart

    NOTE

    For Pie and Doughnut series, you can set the Bezier curve for connector line using ConnectorType property of Pie and Doughnut series.

    Event

    DataMarkerLabelCreated

    The DataMarkerLabelCreated event occurs when the data marker label is created. This argument contains object of the DataMarkerLabel. 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 or sets 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.
    • View Gets or sets the view.
    • GrandTotal - Gets the sum of y-values data.

    See also

    How to customize the data marker of charts in Xamarin.Android