)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfChart |
Published Date: January 16, 2020 |
Last Revised Date: January 16, 2020

In this article, we will discuss how to use the custom view as a chart data marker and how to change data marker appearance based on the y plot?

 

Step 1:

 

By using the ChartDataMarker LabelTemplate, we can replace the data marker label with our own view.

 

The following code sample explains how to add a circle ring shape as a data marker using the Xamarin.Forms border.

 

 
<chart:SfChart>
            . . .        
    <chart:SfChart.Series>
        <chart:SplineAreaSeries ItemsSource="{Binding AreaCollection}" 
                                XBindingPath="XData" 
                                YBindingPath="YData" >
            <chart:SplineAreaSeries.DataMarker>
                <chart:ChartDataMarker x:Name="dataMarker">
                    <chart:ChartDataMarker.LabelTemplate>
                        <DataTemplate>
                            <sfborder:SfBorder 
                                HeightRequest="10" 
                                CornerRadius="20" 
                                WidthRequest="10" 
                                BorderColor="Red" 
                                BorderWidth="2" 
                                BackgroundColor="WhiteSmoke">
                            </sfborder:SfBorder>
                        </DataTemplate>
                    </chart:ChartDataMarker.LabelTemplate>
 
                    <chart:ChartDataMarker.LabelStyle>
                        <chart:DataMarkerLabelStyle LabelPosition="Center"/>
                    </chart:ChartDataMarker.LabelStyle>
                </chart:ChartDataMarker>
            </chart:SplineAreaSeries.DataMarker>
. . .
        </chart:SplineAreaSeries>
    </chart:SfChart.Series>
</chart:SfChart>

 

Step 2:

 

Using IValueConverter, we can customize the appearance of each and every single view that is added as a data marker, the following code shows how to change the data marker color based on the "Y" plots?

 

XAML

<ContentPage.Resources>
        <local:BorderColorConverter x:Key="borderColorConverter"/>
</ContentPage.Resources> 
 
<chart:SfChart>
    . . . 
    <chart:SfChart.Series>
        . . .
                <chart:ChartDataMarker x:Name="dataMarker">
                    <chart:ChartDataMarker.LabelTemplate>
                        <DataTemplate>
                            <sfborder:SfBorder 
                                HeightRequest="10" 
                                CornerRadius="20" 
                                WidthRequest="10" 
                                BorderColor="{Binding Converter={StaticResource borderColorConverter}}" 
                                BorderWidth="2" 
                                BackgroundColor="WhiteSmoke">
                            </sfborder:SfBorder>
                        </DataTemplate>
                    </chart:ChartDataMarker.LabelTemplate>
. . . 
                </chart:ChartDataMarker>
            </chart:SplineAreaSeries.DataMarker>
        </chart:SplineAreaSeries>
    </chart:SfChart.Series>
</chart:SfChart>

 

 

IValueConverter:

public class BorderColorConverter : IValueConverter
{
    static double YValue = 0;
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {
            var yData = (value as DataModel).YData;
            if (yData >= YValue)
            {
                //if y value increased
                YValue = yData;
                return Color.Green;
            }
            else
            {
                //if y value decreased
                YValue = yData;
                return Color.Red;
            }
        }
 
        return value;
    }
}

 

You can download the working sample in this link.

 

Output:

 

Customized datamarker for  chart

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon