Skip to content

Commit ed96316

Browse files
author
DevakumarD
authored
Update README.md
1 parent fc29e22 commit ed96316

File tree

1 file changed

+5
-5
lines changed

1 file changed

+5
-5
lines changed

README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# How to add a custom data marker in WinUI Chart (SfCartesianChart)?
22

3-
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).
3+
This example illustrates how to add a custom view as chart data marker and customize the appearance based on its Y value in the [WinUI charts](https://www.syncfusion.com/winui-controls/charts).
44

5-
**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.
5+
**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 shape as a data marker using the Border.
66

77
```
88
@@ -24,13 +24,13 @@ This example illustrates how to add a custom view as chart Data Label and custom
2424
</chart:SplineAreaSeries>
2525
```
2626

27-
**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.
27+
**Step 2:** Using IValueConverter, we can customize the appearance of the BorderBrush color based on the "Y" data point value for the custom data markers as shown in the following code example.
2828

2929
```
3030
3131
<chart:SfCartesianChart.Resources>
3232
<local:BorderColorConverter x:Key="borderColorConverter"/>
33-
<DataTemplate x:Key="dataLabelTemplate">
33+
<DataTemplate x:Key="dataMarkerTemplate">
3434
<Border Height="10" Width="10" CornerRadius="20"
3535
BorderBrush="{Binding Converter={StaticResource borderColorConverter}}"
3636
Background="WhiteSmoke" BorderThickness="2">
@@ -44,7 +44,7 @@ This example illustrates how to add a custom view as chart Data Label and custom
4444
ShowDataLabels="True"
4545
PaletteBrushes="{StaticResource customBrushes}">
4646
<chart:SplineAreaSeries.DataLabelSettings>
47-
<chart:CartesianDataLabelSettings ContentTemplate="{StaticResource dataLabelTemplate}"/>
47+
<chart:CartesianDataLabelSettings ContentTemplate="{StaticResource dataMarkerTemplate}"/>
4848
</chart:SplineAreaSeries.DataLabelSettings>
4949
</chart:SplineAreaSeries>
5050
```

0 commit comments

Comments
 (0)