How to display custom data marker in WinUI Chart (SfCartesianChart)?
This article explains how to add a custom view as a chart data marker and customization of the appearance based on its Y value in the WinUI charts.
Step 1: By using the ContentTemplate property of the CartesianDataLabelSettings, you can add the data marker with custom view. The following code example explains how to add a circle shape as a data marker using the Border.
…
<chart:SfCartesianChart.Resources>
<DataTemplate x:Key="dataMarkerTemplate">
<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 dataMarkerTemplate}"/>
</chart:SplineAreaSeries.DataLabelSettings>
</chart:SplineAreaSeries>
Step 2: Using the IValueConverter, you can customize the appearance of the BorderBrush color based on the "Y" data point value for the custom data marker 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 the Y value increased
YValue = yData;
return new SolidColorBrush(Colors.Green);
}
else
{
//If the 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
View sample in GitHub for more details
See also
How to customize the data label in WinUI Chart (SfCartesianChart)?
How to customize the appearance in WinUI Chart (SfCartesianChart)?
Conclusion
I hope you enjoyed learning about how to display custom data marker in WinUI Chart (SfCartesianChart).
You can refer to our WinUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our WinUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our WinUI Chart and other WinUI components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
