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.
Unfortunately, activation email could not send to your email. Please try again.

Custom Adornment Color in line chart

Thread ID:

Created:

Updated:

Platform:

Replies:

131814 Jul 28,2017 04:23 AM Aug 1,2017 05:55 AM WPF 3
loading
Tags: SfChart
Blackwater
Asked On July 28, 2017 04:23 AM

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.


Durgadevi Selvaraj [Syncfusion]
Replied On July 31, 2017 07:23 AM

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 


Blackwater
Replied On July 31, 2017 10:10 PM

Hi Durgadevi,

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

The value cannot be converted into ChartAdornment type. 




Durgadevi Selvaraj [Syncfusion]
Replied On August 1, 2017 05:55 AM

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 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;