Custom Adornment Color in line chart

[Blackwater]

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]

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, 

Sample: Adornment_Customization
 

Regards,  

Durgadevi S 

[Blackwater]

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]

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, 

Link: https://www.syncfusion.com/forums/130361/essential-studio-2017-volume-2-release-v15-2-0-40-is-available-for-download 

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, 

Sample:Adornment_Sample 

 

Regards, 

Durgadevi S