Articles in this section
Category / Section

How to show different data marker based on the value in the WPF Chart?

2 mins read


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:

Symbol Template Image


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!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied