How to show different data marker based on the value in the WPF Chart?
This KB explains how to show a custom data marker based on value in the WPF Chart series.
You can show the custom data marker in chart using the ChartAdornmentInfo SymbolTemplate property by the following steps.
You can display a custom symbol by following this KB article and you can download the complete sample from the following link.
How to show different data marker based on value in the WPF chart?
In addition, you can show multiple symbols based on the value by using the DataTemplateSelector to select the symbols and assign the declared data template to the SymbolTemplate property as per the following code example.
XAML
<syncfusion:SfChart > <syncfusion:SfChart.Resources> <ResourceDictionary> <DataTemplate x:Key="CrossTemplate"> …….. </DataTemplate> <DataTemplate x:Key="DiamondTemplate"> <Grid Height="15" Width="15"> <Path Stretch="Fill" Stroke="{Binding Interior}" Fill="{Binding Interior}" Data="F1 M 156.37,93.7292L 134.634, 71.8159L 112.906,49.9025L 91.1711,71.8159L 69.4364,93.7292L 70.1524,93.7292L 91.8844,115.644L 113.623,137.556L 135.362, 115.644L 157.09,93.7292L 156.37,93.7292 Z " /> </Grid> </DataTemplate> <local:SymbolDataTemplateSelector HighValueTemplate="{StaticResource CrossTemplate}" LowValueTemplate="{StaticResource DiamondTemplate}" x:Key="SymbolTemplateSelectorKey"/> <DataTemplate x:Key="symbolTemplate"> <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource SymbolTemplateSelectorKey}" /> </DataTemplate> </ResourceDictionary> </syncfusion:SfChart.Resources> ……… <syncfusion:LineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue"> <syncfusion:LineSeries.AdornmentsInfo> <syncfusion:ChartAdornmentInfo SymbolTemplate="{StaticResource symbolTemplate}"> </syncfusion:ChartAdornmentInfo> </syncfusion:LineSeries.AdornmentsInfo> </syncfusion:LineSeries> </syncfusion:SfChart>
C#
public class SymbolDataTemplateSelector : DataTemplateSelector { public DataTemplate HighValueTemplate { get; set; } public DataTemplate LowValueTemplate { get; set; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { if (item == null) return null; var adornment = item as ChartAdornment; var model = adornment.Item as Model; //You can change the value based on your requirement if (model.YValue > 150) { return HighValueTemplate; } else { return LowValueTemplate; } } }
Output:
See also:
How to rotate text in data marker
How to display custom data marker in chart series
How to display the labels inside segments