Added example sample.

Author: Devakumar D

README.md

@@ -1 +1,94 @@
-# How-to-add-a-custom-data-marker-in-WinUI-Chart-SfCartesianChart-
+# How to add a custom data marker in WinUI Chart (SfCartesianChart)?
+
+This example illustrates how to add a custom view as chart Data Label and customize the appearance based on its Y value in the [WinUI charts](https://www.syncfusion.com/winui-controls/charts).
+
+**Step 1:** By using the [ContentTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.ChartDataLabelSettings.html#Syncfusion_UI_Xaml_Charts_ChartDataLabelSettings_ContentTemplate) property of [CartesianDataLabelSettings](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.CartesianDataLabelSettings.html), we can add the data label with custom view. The following code example explains how to add a circle ring shape as a data label using the Border control.
+
+```
+…
+<chart:SfCartesianChart.Resources>
+    <DataTemplate x:Key="dataLabelTemplate">
+        <Border Height="10" Width="10" CornerRadius="20"
+                BorderBrush="Red " BorderThickness="2"
+                Background="WhiteSmoke" >
+        </Border>
+    </DataTemplate>
+</chart:SfCartesianChart.Resources>
+
+<chart:SplineAreaSeries ItemsSource="{Binding Data}"
+                        XBindingPath="XValue" YBindingPath="YValue" 
+                        ShowDataLabels="True">
+    <chart:SplineAreaSeries.DataLabelSettings>
+        <chart:CartesianDataLabelSettings ContentTemplate="{StaticResource dataLabelTemplate}"/>
+    </chart:SplineAreaSeries.DataLabelSettings>
+</chart:SplineAreaSeries>
+```
+
+**Step 2:** Using IValueConverter, we can customize the appearance of the BorderBrush color based on the "Y" data point value for the custom data labels as shown in the following code example.
+
+```
+…
+<chart:SfCartesianChart.Resources>
+    <local:BorderColorConverter x:Key="borderColorConverter"/>
+    <DataTemplate x:Key="dataLabelTemplate">
+        <Border Height="10" Width="10" CornerRadius="20"
+                BorderBrush="{Binding Converter={StaticResource borderColorConverter}}" 
+                Background="WhiteSmoke" BorderThickness="2">
+        </Border>
+    </DataTemplate>
+    …
+</chart:SfCartesianChart.Resources>
+…
+<chart:SplineAreaSeries ItemsSource="{Binding Data}"
+                        XBindingPath="XValue" YBindingPath="YValue" 
+                        ShowDataLabels="True"
+                        PaletteBrushes="{StaticResource customBrushes}">
+    <chart:SplineAreaSeries.DataLabelSettings>
+        <chart:CartesianDataLabelSettings ContentTemplate="{StaticResource dataLabelTemplate}"/>
+    </chart:SplineAreaSeries.DataLabelSettings>
+</chart:SplineAreaSeries>
+```
+
+**BorderColorConverter.cs**
+```
+public class BorderColorConverter : IValueConverter
+{
+    static double YValue = 0;
+    public object Convert(object value, Type targetType, object parameter, string language)
+    {
+        if (value != null)
+        {
+            var yData =  System.Convert.ToDouble(value);
+            if (yData >= YValue)
+            {
+                //if y value increased
+                YValue = yData;
+                return new SolidColorBrush(Colors.Green);
+            }
+            else
+            {
+                //if y value decreased
+                YValue = yData;
+                return new SolidColorBrush(Colors.Red);
+            }
+        }
+
+        return new SolidColorBrush(Colors.Transparent);
+    }
+
+    public object ConvertBack(object value, Type targetType, object parameter, string language)
+    {
+        return value;
+    }
+}
+```
+
+### Output
+
+
+
+### See also
+
+[How to customize the data label in WinUI Chart (SfCartesianChart)?](https://help.syncfusion.com/winui/cartesian-charts/datalabels#template)
+
+[How to customize the appearance in WinUI Chart (SfCartesianChart)?](https://help.syncfusion.com/winui/cartesian-charts/appearance)

WinUI_Chart_CustomDataLabel/App.xaml

@@ -0,0 +1,18 @@
+<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
+<!-- Licensed under the MIT License. See LICENSE in the project root for license information. -->
+
+<Application
+    x:Class="CustomDataLabel.App"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:CustomDataLabel">
+    <Application.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+                <!-- Other merged dictionaries here -->
+            </ResourceDictionary.MergedDictionaries>
+            <!-- Other app resources here -->
+        </ResourceDictionary>
+    </Application.Resources>
+</Application>

WinUI_Chart_CustomDataLabel/App.xaml.cs

@@ -0,0 +1,54 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License. See LICENSE in the project root for license information.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+using Microsoft.UI.Xaml.Shapes;
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Windows.ApplicationModel;
+using Windows.ApplicationModel.Activation;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+
+// To learn more about WinUI, the WinUI project structure,
+// and more about our project templates, see: http://aka.ms/winui-project-info.
+
+namespace CustomDataLabel
+{
+    /// <summary>
+    /// Provides application-specific behavior to supplement the default Application class.
+    /// </summary>
+    public partial class App : Application
+    {
+        /// <summary>
+        /// Initializes the singleton application object.  This is the first line of authored code
+        /// executed, and as such is the logical equivalent of main() or WinMain().
+        /// </summary>
+        public App()
+        {
+            this.InitializeComponent();
+        }
+
+        /// <summary>
+        /// Invoked when the application is launched normally by the end user.  Other entry points
+        /// will be used such as when the application is launched to open a specific file.
+        /// </summary>
+        /// <param name="args">Details about the launch request and process.</param>
+        protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs args)
+        {
+            m_window = new MainWindow();
+            m_window.Activate();
+        }
+
+        private Window m_window;
+    }
+}