We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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:

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

 

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile