Articles in this section
Category / Section

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

2 mins read

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

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied