How to show different data marker based on the value in the WPF Chart?
This knowledge base article describes how to display different custom data markers in a WPF Chart based on their values. By using the ChartAdornmentInfo.SymbolTemplate property, you can customize the appearance of data markers
You can display a custom symbol by following this KB article and you can download the complete sample from the following link.
Custom Data Marker Display
To show different data markers based on value in the WPF chart, use a DataTemplateSelector to select templates, and assign these templates to the SymbolTemplate property as demonstrated in the following 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
Conclusion
I hope you enjoyed learning how to show different data marker based on the value in the WPF Chart.
You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.
For current customers, you can check out our 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 other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!