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
  1. Home
  2. Forum
  3. WPF
  4. Custom Adornment Color in line chart

Custom Adornment Color in line chart

Hi Syncfusion Team,

I am using line chart to visual data and I am also using adornment to display data point.

One of my requirement is to change  adornment color based on the data item property. 

As an example, Lets say, I have a class definition like below. 

Class ChartData{
     string YValue {get;set;}
     string XValue {get;set;}
     bool ColorFlag {get;set;}
}

I would like to change adornment color based on ColorFlag property.

Regards.


3 Replies
DS Durgadevi Selvaraj Syncfusion Team July 31, 2017 11:23 AM UTC

Hi Blackwater, 

Thanks for contacting Syncfusion Support. 

We have analyzed your requirement and you can achieve it with the help of converter in adornment symbol template as shown in the below code snippet, 

MainWindow.xaml: 
<chart:LineSeries ItemsSource="{Binding Collection}" 
                                XBindingPath="XValue" YBindingPath="YValue" 
                                > 
     <chart:LineSeries.AdornmentsInfo> 
         <chart:ChartAdornmentInfo ShowMarker="True" ShowLabel="True" > 
             <chart:ChartAdornmentInfo.SymbolTemplate> 
                 <DataTemplate> 
                    <Ellipse Height="20" Width="20" Fill="{Binding Converter={StaticResource symbolColor}}"/> 
                 </DataTemplate> 
              </chart:ChartAdornmentInfo.SymbolTemplate> 
         </chart:ChartAdornmentInfo> 
      </chart:LineSeries.AdornmentsInfo> 
</chart:LineSeries> 
             
 

SymbolColor.cs: 
public class SymbolColor : IValueConverter 
    { 
      public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
      { 
 
            var adornment = value as ChartAdornment; 
            var item = adornment.Item as Model; 
            if (item.ColorFlag) 
                return new SolidColorBrush(Colors.Yellow); 
            else 
                return new SolidColorBrush(Colors.Red); 
      } 
      } 


Please find the output screenshot, 
 

We have prepared a demo sample based on your requirement and it can be downloaded from the below link, 

Regards,  
Durgadevi S 


BL Blackwater August 1, 2017 02:10 AM UTC

Hi Durgadevi,

I tried to run the sample app and it was failing to run. 

The value cannot be converted into ChartAdornment type. 




DS Durgadevi Selvaraj Syncfusion Team August 1, 2017 09:55 AM UTC

Hi BlackWater, 

Thanks for your update. 

We suspect that you are using our old version of SfChart. We have modified adornment symbol template data context as ChartAdornment  from 14.3.0.52 version. Could you please upgrade to our latest version? it can be downloaded from the below link, 


However, we can achieve your requirement in your current version with the help of converter in  Label template of chart adornment as like in the below code snippet, 

Mainwindow.xaml: 

<chart:LineSeries.AdornmentsInfo> 
                    <chart:ChartAdornmentInfo ShowLabel="True" SegmentLabelContent="LabelContentPath"> 
                        <chart:ChartAdornmentInfo.LabelTemplate> 
                            <DataTemplate> 
                                <Grid> 
                                <Ellipse Height="20" Width="20" Fill="{Binding Converter={StaticResource symbolColor}}"/> 
                                    <TextBlock Text="{Binding YData}" HorizontalAlignment="Center"/> 
                                </Grid> 
                            </DataTemplate> 
                        </chart:ChartAdornmentInfo.LabelTemplate> 
                    </chart:ChartAdornmentInfo> 
                </chart:LineSeries.AdornmentsInfo> 
SymbolColor.cs: 

public class SymbolColor : IValueConverter 
    { 
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
        { 
 
            var adornment = value as ChartAdornment; 
            var item = adornment.Item as Model; 
           if (item.ColorFlag) 
                return new SolidColorBrush(Colors.Yellow); 
            else 
                return new SolidColorBrush(Colors.Red); 
        } 
 
    } 

 
Please find the sample from the below link, 

 
Regards, 
Durgadevi S 
 


Loader.
Up arrow icon